vue 创建项目步骤
1. 安装 vue 脚手架
1. npm install -g @vue/cli 或者 cnpm install -g @vue/cli
2. npm install vue -g
// 查看版本号
vue -V
// 这里 2.x 是 旧版本 3.x 是新版本
2. 创建 Vue 项目 命令行创建 Vue 项目
vue create my-project
1. 选择`Manually select features`(选择特性以创建项目)
2. 勾选特性可以用空格进行勾选。
(a).Bable(b)Router(c)Linter/Formatter(d)Vuex
3. 选择 vue 的版本 2.x(引入 ElementUi) // 3.x 引入 ElementUi 组件有兼容性问题
4. Use history mode for router? (是否选用历史模式的路由)：n
5. ESLint选择：`ESLint + Standard config`
6. 何时进行ESLint语法校验：`Lint on save`
7. babel，postcss等配置文件如何放置：`In dedicated config files`(单独使用文件进行配置)
8. Save this as a preset for futrue projects(是否保存为模板)：n
9. 使用哪个工具安装包：npm
创建项目完成后 cd my-project npm run serve 让项目运行起来
3. 图形化创建 Vue 项目
vue ui
在图形化里面选择 属性 创建 Vue 项目
4. 创建 vue 2.x 版本的 vue 项目
npm install -g @vue/cli-init
// 创建 veu 2.x 版本的项目
vue init webpack my-project
1. Project name 默认
2. Project description 默认
3. Author wqx
4. Vue build runtime-only 选择精简版
5. Install vue-router? y
6. Use ESLint to lint your code? y
7. Pink an ESLint preset Standard
8. Set up unit tests n
9. Setup e2e tests with Nightwatch? n
10. Should we run npm install for you after the project has been created? Yes, use NPM
然后 cd my-project npm run dev 运行项目
5. Vue脚手架的自定义配置
A.通过 package.json 进行配置 [不推荐使用]
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.通过单独的配置文件进行配置，创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
6. Element-UI的基本使用
A.安装：
npm install element-ui -S 或者 cnpm install element-ui -S
B.导入使用：
// 引入 ElementUI 组件 main.js 文件中
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
