npm - v //安装vue脚手架 npm install vue - cli - g vue init webpack //安装组件 npm i vant - s //安装组件 npm i element - ui - S //安装组件 //ui组件 按需加载 1, 安装插件 cnpm i babel - plugin - import --save - dev 2, 修改.babelrc文件, 在plugins节点下, 添加下面这个配置项: { "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } //安装淘宝镜像 cnpm - v 如果有出现版本号证明安装成功 npm install - g cnpm--registry = https: //registry.npm.taobao.org //安装scss //1.安装scss npm install node - sass sass - loader - D //2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"] } } //3.在 .vue文件里使用 <style scoped lang="scss"> .box{ width: 100%; :hover{ color: red; } } </style> // 踩坑一:(Module build failed: TypeError: this.getOptions is not a function ) // 这个问题主要是因为node-loader版本过高导致的问题,我们尝试将版本降低到@7.3.1, // 直接使用命令: npm install sass - loader @7 .3 .1--save - dev 降低版本号 // 踩坑二:若坑一未解决,并且继续抛出异常(Node Sass version 5.0.0 is incompatible with ^4.0.0) // 问题其实指明的很明显了,就是说@5.0.0版本过高了,需要换成@4.x版本的 // 这里我们降版本到@4.14.1 npm install node-sass@4.14.1 --save-dev //打包后图片找不到问题 1.webpack.prod.conf.js 在 output 增加: publicPath:"./" //有时候把别人的vue 项目clone下来会报错, //解决办法(暂时不知道对不对) npm remove webpack-dev-server npm install webpack-dev-server@2.9.1 npm run dev