3. vue 创建项目步骤 vue 配置自启动 ElementUi 组件的导入

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)