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

这个下载包是自己基于 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 '~@css/style.css'

       "@": resolve("src")

   }

}

`注意`

1、在 vue-cli 脚手架中，当在 webpack.config.js 配置文件中 resolve 中设置了路径别名后，在模板组件中的 <style> 中引入样式需要加 ~ 波浪线，如： import '~@css/style.css' 。
2、在 vue-cli 脚手架中，在模板组件中的 <style> 中的样式可以穿透子组件，不受 scoped 限制，如： .swiper >>> .swiper-action { color:red }，>>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式

<style>

    import '~@css/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