1.安装vue-cli
① 使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npm install webpack webpack-cli -g
② 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cl
2.用vue-cli来构建项目
① 在工作目录下进入npm 输入一下命令创建一个vue项目:
vue init webpack vue-cli
跳出的选择可以一路yes下去。 需要注意的是创建文件用小写与 — 来拼接。(阮一峰-项目名为什么要用小写命名)
如果运行时eslint报错。 可以选择在build/webpack.base.conf.js里的eslint功能关闭
module: {
rules: [
// ...(config.dev.useEslint ? [createLintingRule()] : []),
]
}
② 配置完成后,可以看到目录下多出了一个项目文件夹然后cd进入这个文件夹:
安装依赖:
npm install
( 如果安装速度太慢。可以安装淘宝镜像,打开命令行工具,输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后使用cnpm
来安装 )
3.启动项目
npm run dev
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js
还有,如果本地调试项目时,建议将build 里的assetsPublicPath
的路径前缀修改为 ' ./ '(开始是 ' / '),因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。(路径尽量使用相对路径而不要用绝对路径!!!)
注意:在进行vue页面调试时,可以下载个vue-tool扩展程序。
4.vue-cli的webpack配置分析
- 从
package.json
可以看到开发和生产环境的入口。 - 可以看到dev中的设置,build/webpack.dev.conf.js,该文件是开发环境中webpack的配置入口。
- 在webpack.dev.conf.js中出现webpack.base.conf.js,这个文件是开发环境和生产环境,甚至测试环境,这些环境的公共webpack配置。可以说,这个文件相当重要。
- 还有config/index.js 、build/utils.js 、build/build.js等,具体请看这篇介绍:
https://segmentfault.com/a/1190000008644830
5.打包上线
注意,自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后,可以输入 npm run build
来进行打包工作。
npm run build
打包完成后,会生成 dist 文件夹(生成的路径可以在config/index.js里改)。
项目上线时,只需要将 dist 文件夹放到服务器就行了。
Tips:
1.router 里导入vue组件 推荐使用以下这种方法导入
component: resolve => require(['../pages/home.vue'], resolve)
如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
2.引用路径
@开头的路径。是在webpack.base.conf.js 中配置的。一般默认为src文件夹。
使用路径推荐用相对路径而不是/开头的绝对路径。
3. 引用scss
Vue文件中 scoped表明此样式表只作用于本页面。 lang="scss"表面用scss编写样式表
<style scoped lang="scss">
*{
margin: 0;
padding: 0;
}
</style>
安装依赖即可dev下看到效果
npm install --save-dev node-sass
npm install --save-dev sass-loader
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
4. 背景图build后路径不对
打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可