这个下载包是自己基于 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 目录配置别名. 方便引入文件
- // 注意: 在模板组件中的 <style > 引入样式 需要加 ~ 波浪线
- // 如: import '[email protected]/style.CSS'
- "@": resolve("src")
- }
- }
注意
1, 在 vue-cli 脚手架中, 当在 webpack.config.JS 配置文件中 resolve 中设置了路径别名后, 在模板组件中的 <style> 中引入样式 需要加 ~ 波浪线, 如: import '[email protected]/style.css' .
2, 在 vue-cli 脚手架中, 在模板组件中的 <style> 中的样式可以穿透子组件, 不受 scoped 限制, 如: .swiper>>> .swiper-action { color:red },>>> 表示样式穿透, 表示 .swiper 里面所有子组件, 出现 .swiper-action 的都应用这个样式
- <style>
- import '[email protected]/style.css' # 1
- #>>> 表示样式穿透, 表示 .swiper 里面所有子组件, 出现 .swiper-action 的都应用这个样式
- .swiper>>> .swiper-action{
- color:red
- }
- </style>
项目准备工作
1.index.html
在首页模板中的 meta 标签改为如下这样
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,er-scalable=no">
这样就防止了用户在设备上放大缩小.
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/593746a6ee2d
来源: http://www.bubuko.com/infodetail-3329530.html