开发前准备工作
Vue项目依赖环境
Vue项目开发需要基于Nodejs,请确保安装Nodejs(建议安装最新版本Nodejs
)。
node -v
项目开发过程中,需要利用Nodejs包管理器NPM。
npm -v
安装命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
全局安装webpack
npm install webpack -g
安装全局的vue-cli脚手架
npm install -g @vue/cli
检查版本
vue -V
Vue项目的开发流程
Vue项目的开发流程,如下:
- 利用命令行工具创建项目
- 项目开发前配置
- 项目开发阶段
- 项目打包与优化阶段
- 项目上线
接下来我们以商城项目为例,项目目录 my-project
1. 利用命令行工具创建项目
vue create my-project //普通的vue项目
或
vue ui // 图形界面方式创建项目
或
vue init webpack my-project //创建一个基于”webpack”的项目,后面是项目名,
进入项目配置向导,在项目创建的过程中,你可以选择项目需要依赖的工具如(vue-router、vuex等)。
项目创建完成,启动项目测试安装是否成功:
cd my-project npm run serve //运行开发环境
运行后,你会看到如下页面:
![](https://i-blog.csdnimg.cn/blog_migrate/1b2966022da32d053540f4a70dd3d8fd.png)
2. 项目开发前配置
- 根据需求修改配置
- 根据需求修改目录结构
- 根据需求安装自己所需的第三方依赖(如组件库element-ui、axios、vue-filter等)
- 根据后台提供的数据接口规范开发mock模拟接口。
- ....
3. 项目开发阶段
根据项目需求开发组件、开发页面、与后台进行项目联调、项目测试。
4. 项目打包与优化阶段
项目打包测试
运行下列命令进行项目打包:
npm run build
打包完成后的,最终代码都会生成在dist目录中。
项目优化
通过下列命令查看打包分析:
npm run build --report
根据分析结果,进行相应优化
5. 项目上线
将dist目录中的资源,发布到线上环境。
目录结构
/
│
├── node_modules/ # 自动生成,包含Node生产依赖以及开发依赖
│
├── public/ # 纯静态资源,不会被wabpack构建。
│ ├── index.html # 入口页面
│ └── favicon.ico # 网站站标 │ ├── src/ # 项目源码目录 │ ├── main.js # 入口js文件 │ ├── app.vue # 根组件 │ ├── components # 公共组件目录 │ │ └── title.vue │ ├── pages/ # 页面目录 │ │ ├── about.vue │ │ └── notfound.vue │ ├── assets/ # 资源目录,这里的资源会被wabpack构建 │ │ └── images/ │ │ └── logo.png │ ├── routes/ # 前端路由 │ │ └── index.js │ └── store/ # 应用级数据(state) │ └── index.js │ ├── .gitignore # git排除文件 │ ├── babel.config.js │ ├── vue.config.js # vue配置文件 │ ├── package.json # npm包配置文件,里面定义了项目的npm脚本,依赖包等信息 │ └── README.md
目录介绍
文件 | 类型 | 描述 |
---|---|---|
src | 目录 | 存放开发文件目录 |
src/main.js | 文件 | 入口文件 |
src/router | 目录 | 存放路由目录 |
src/components | 目录 | 存放项目组件(.vue)目录 |
src/App.vue | 文件 | App.vue文件,这是Vue自己的文件类型,在Vue中,官网叫它做组件,单页面的意思是结构,样式,逻辑代码都写在同一个文件中,当我们引入这个文件后,就相当于引入对应的结构、样式和JS代码 |
src/assets | 目录 | 存放 js、css、模板、图片、flash 等等静态资源文件 |
package.json | 文件 | 配置文件,保存一些依赖信息,以及项目初始化配置。 |
public | 目录 | 静态资源,不会被wabpack构建 |
public/index.html | 文件 | 网站首页 |
public/favicon.ico | 文件 | 网站站标 |
config | 目录 | 项目配置 |
main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //值为false 去掉警告 You are running Vue in development mode Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
安装webpack,webpack-dev-server以及相关的loaders
npm install -g webpack npm install -g webpack-dev-server 为项目安装其他依赖 npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D
webpack-merge:开发环境和生产环节的webpaak配置文件的配置合并
css-loader:编译写入css
style-loader:把编译后的css整合进html
file-loader:编译写入文件,默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue:vue主程序
vue-loader:编译写入.vue文件
vue-html-loader:编译vue的template部分
vue-style-loader:编译vue的样式部分
vue-hot-reload-api:webpack对vue实现热替换
babel-core:ES2015编译核心
babel-loader:编译写入ES2015文档
babel-preset-es2015:ES2015语法
babel-preset-stage-0:开启测试功能
babel-runtime:babel执行环境
url-loader
项目配置
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象:
// vue.config.js
module.exports = {
// 选项...
}
配置详解
可点击访问官方配置详解
module.exports = { // 部署应用时的基本 URL publicPath: '/', // 输出文件目录 运行时生成的生产环境构建文件的目录(默认'dist',构建之前会被清除) outputDir: 'dist', //放置生成的静态资源(js、css、img、fonts)的(相对于 outputDir)目录(默认'') assetsDir: '', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only compiler: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // vue-loader 配置项 // https://vue-loader.vuejs.org/en/options.html vueLoader: {}, // 生产环境是否生成 sourceMap 文件 productionSourceMap: true, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, // 是否启用dll // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode dll: false, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相关配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 设置代理 before: app => {} }, // 第三方插件配置 pluginOptions: { // ... } }