vue-cli脚手架创建项目

1、官网下载node，安装node.js环境

      安装完成后进入cmd，输入node -v和npm -v查看node和npm是否安装成功及对应的版本

2、全局安装vue-cli：npm install -g vue-cli,此命令运行一次即可，以后就不用安装了

      执行vue -V查看vue的版本

方式一：

3、执行vue create vue-cli-demo，选择manually select features即自定义项目

4、选择配置选项：常用比如Babel、Router、Vuex、Css Pre-processors、Linter/Formatter

5、依次：选择 history 模式的路由、选择css预处理器Sass/Scss(with dart-sass)、选择ESlint+Prettier、选择Lint  on  save、选择把bable,postcss,eslint的配置文件为单独文件、选择存为模板或者不存都行

6、下载完毕后就可以启动项目

7、根据需要可以自定义配置：

在项目根目录下创建vue.config.js文件：就可以添加配置，

比如：module.exports={

　　devServer: {
　　　　port: 8001, // 端口号，如果端口被占用，会自动提升 1
　　　　open: true, // 启动服务自动打开浏览器
　　　　https: false, // 协议
　　　　host: "localhost", // 主机名，也可以 127.0.0.1 或 做真机测试时候 0.0.0.0
　　},
　　lintOnSave: false, // 默认 true, 警告仅仅会被输出到命令行，且不会使得编译失败。
　　outputDir: "dist2", // 默认是 dist ,存放打包文件的目录,
　　assetsDir: "assets", // 存放生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir) 目录
　　indexPath: "out/index.html", // 默认 index.html, 指定生成的 index.html 的输出路径 (相对于 outputDir)。
　　productionSourceMap: false, // 打包时, 不生成 .map 文件, 加快打包构建
}

方式二：

3、创建项目：vue init  webpack hellovue

4、安装路由:npm install vue-router --save-dev

5、安装elementUi组件：npm install element-ui -S

6、安装项目依赖：npm install

7、运行项目：npm run dev

8、安装sass：cnpm install sass-loader node-sass --save-dev

     或者分别执行：npm install node-sass@^4.14.1 -D、 npm install sass-loader@^7.0.3 -D

     （注：安装sass时有时会因为超时一次安装不成功，找个网络好的地方，多安装几次。）

      安装成功sass后，找到build文件夹下的webpack.base.conf.js，在module:{}中添加

　　{

       　　 test:/.scss$/,

        　　loader:["style","css","sass"]

       }

      如果报错this.getResolve is not a function，说明是sass-loader的版本过高，因为不指定安装的是8.0.0,此时重新安装7.0.3版本，见上文命令

      安装完成后输入<style lang='scss'>测试会不会报错

9、如有需要安装axios：npm install axios -s

10、打包：npm run build

      打包完成后悔生成dist文件夹，项目上线时只需要将dist文件夹放到服务器就可以

参见：1、https://blog.csdn.net/inthuixiang/article/details/82225407

            2、https://www.jianshu.com/p/251a9db4eebf

            3、https://www.cnblogs.com/smallVampire/p/12924776.html

拓展：

1、升级npm: npm install -g npm

2、淘宝镜像的安装: npm install cnpm -g --registry=https://registry.npm.taobao.org

      cmd中输入 cnpm -v 查看是否安装成功及对应的版本

3、如果项目启动后显示无法访问，原因是本地端口被占用，要修改端口号，打开config文件夹下的index.js文件，找到port,比如可以修改为port:8787

4、使用npm下载时，出现错误Unexpected end of JSON input while parsing near···，解决方法：先清除缓存，再重新安装

     清除缓存：运行npm cache clean --force，重新安装npm install

5、友情提示：安装完以上依赖记得在main.js写：

       import router from './router'

　　import 'element-ui/lib/theme-chalk/index.css'

　　import ElementUI from 'element-ui'

 

　　Vue.use(ElementUI)

 

　　new Vue({

  　　el: '#app',

  　　router,

  　　components: { App },

  　　template: '<App/>'

　　})