开发前准备工作
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 //运行开发环境
运行后，你会看到如下页面：
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
# 全局安装webpack，webpack-dev-server
$ 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: {
// ...
}
}
网友评论