vue-cli安装webpack项目及初始配置

标签：bee   ble   att   地址   created   registry   promise   代码风格   脚手架     这个下载包是自己基于 webpack 搞的，可以看看https://github.com/chichengyu/webpack vue-cli安装 输入 npm install vue-cli -g # 如果速度慢，可以先安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 然后再安装 vue-cli cnpm install vue-cli -g # 或者使用这节说到的 nrm 进行切换镜像源 https://www.jianshu.com/p/dbdc937997df # 卸载 npm uninstall vue-cli -g vue-cli 安装好之后，然后初始化项目： vue init webpack "项目名称" # 当然我自己比较喜欢 webpack-simple 进行创建项目 vue init webpack-simple "项目名称" 注意：webpack 与 webpack-simple 区别： 本质上没有什么区别，webpack-simple除了没有eslint的代码风格检查器 和 单元测试，其他跟 webpack 一样，使用 webpack-simple初始化的项目比较简洁。 执行初始化创建项目命令后，此时会弹出命令 : ?Project name （firstVue） 项目名称。 ？Project description(A vue.js project) (此处是添加项目描述)。 ？Author (***) (作者名称)。 ？Use Eslint to lint your code (Y/N) (是否使用eslint的代码风格检查器)。 ？should we run "npm install" for you after the project has been created? 选择yes，use NPM 安装完成后，可以在 webpack.config.js 中配置路径别名： resolve:{ alias:{ // 修改 vue 被导入时的路径 $ 表示以 vue 结尾 "vue$":"vue/dist/vue.esm.js" // 给根目录下的 src 目录配置别名。方便引入文件 // 注意：在模板组件中的 引入样式 需要加 ~ 波浪线 // 如：import ‘~@css/style.css‘ "@": resolve("src") } } 注意 1、在 vue-cli 脚手架中，当在 webpack.config.js 配置文件中 resolve 中设置了路径别名后，在模板组件中的 中引入样式 需要加 ~ 波浪线，如： import ‘~@css/style.css‘ 。2、在 vue-cli 脚手架中，在模板组件中的 中的样式可以穿透子组件，不受 scoped 限制，如： .swiper >>> .swiper-action { color:red }，>>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式 import ‘~@css/style.css‘ # 1 # >>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式 .swiper >>> .swiper-action{ color:red }   项目准备工作 1.index.html 在首页模板中的 meta 标签改为如下这样 这样就防止了用户在设备上放大缩小。 2.引入 reset.css、border.css 下载地址：https://share.weiyun.com/5e9di8c reset.css进行默认样式清除，border.css解决移动端边框 1像素的问题 3.解决移动端 click 事件300毫秒延迟 需要引入 fastclick 包，在项目根目录下，打开 命令窗口，输入： npm install fastclick --save 安装完成之后，在入口文件 main.js 中输入： import fastClick from ‘fastclick‘ fastClick.attach(document.body)   4.stylus stylus 跟 less 、scss 很像，执行 如下进行安装 npm install stylus --save npm install stylus-loader --save 文件后缀是 .styl 5.babel-polyfill 解决部分浏览器或手机不支持 Promise npm install babel-polyfill --save 在入口文件 main.js 中引入 import ‘babel-polyfill‘; // 或者require(‘babel-polyfill‘);       转: https://www.jianshu.com/p/593746a6ee2dvue-cli安装webpack项目及初始配置标签：bee   ble   att   地址   created   registry   promise   代码风格   脚手架   原文地址：https://www.cnblogs.com/fps2tao/p/12034238.html