基于vue-cli（vue脚手架）搭建Vue项目总结
基于vue-cli（vue脚手架）搭建Vue项目总结
基于vue-cli（vue脚手架）搭建Vue项目总结基于vue-cli（vue脚手架）搭建Vue项目总结
一、运行环境
node (v8.12.0) (官网下载安装)+ npm(Node.js的包管理工具) (6.4.1) + Vue（构建用户界面的渐进式框架）(2.9.6) + Intellij IDEA
在之前已安装过node 、npm(npm install -g npm)，通过node -v 、 npm -v 查看已安装的版本号，验证是否安装成功。下面主要是安装、配置Vue相关的开发环境。
1、安装脚手架vue-cli
全局安装vue-cli，安装完成后，可通过vue -V查看vue的版本号。
sudo npm install -g vue-cli 2、Intellij idea安装依赖插件
Preferences - > Plugins 下搜索Vue.js， 安装对Vue的支持。
二、实例总结
1、快速创建vue项目
# vue init webpack testvue
备注：
1.Vue build: # 打包方式
2.Install vue-router? # 安装vue-router， 项目中会用到，Y需要安装
3.Use ESLint to lint your code? # 是否需要js语法检测
4.Pick an ESLint preset
5.Set up unit tests # 是否安装单元测试工具
6.Setup e2e tests with Nightwatch? # 是否需要端到端测试工具
7.Should we run `npm install` for you after the project has been created? (recommended) # 安装依赖，如果选择No, 也可通过cnpm i 安装
2、第一个页面
2.1 目录结构
实际在Intellij idea中会提示js错误，默认javascript的版本不够导致。 在Preferences | Languages & Frameworks | JavaScript 下修改JavaScript language version即可。
备注：
1.build: 构建脚本目录
2.config: 项目配置
3.node_modules: npm加载的项目依赖模块
4.src: 开发的目录
1）assets：资源目录，放置一些图片或者公共js、公共css，会被webpack构建；
2）components：组件目录；
3）router：前端路由，需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5.static: 静态资源目录
6.index.html: 首页入口文件
7.package.json: npm包配置文件
8.README.md: 说明文档
9. .XXX文件：一些配置文件，包括语法配置，git配置等
2.2 实践
1）components下新建Test.vue
template：写html等；
script：js
style：样式
<template>
<div>
<h1>hi, {{msg}} ! </h1>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
msg: 'Test first'
}
}
}
</script>
<style scoped>
</style>
2）在router/index.js中配置路由路径
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test' # import
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/test', # /test跳转test.vue
name: 'Test',
component: Test
}
],
mode: 'history'
})
3）在HelloWord主页下加入跳转Test
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<p><router-link to="/test">next-></router-link></p> # router-link
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2.3、run
npm run dev # serve with hot reload at localhost:8080
编译成功后访问http://localhost:8080可查看效果：
运行结果：
2.4 其他配置：
config/index.js： 配置端口号（避免冲突）、或者自动打开浏览器
