一、概要
vue现在在很多公司会大量使用,研究一下vue-cli脚手架构建项目的项目结构,有助于理解vue。
博客首发地址:https://www.mwcxs.top/page/570.html
使用vue-cli脚手架搭建vue项目的具体步骤如下:
npm install -g vue-cli
cd E:(跳转到项目目录)
vue init webpack vueproject (vueproject 为项目目录名称,可行更改)
cd vueproject
npm install
npm run dev
二、具体分析
2.1package.json文件
1、script字段
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
项目开发周期主要执行的两个任务分别是开发环境npm run dev
和打包任务npm run build,
script字段是用来指定npm相关命令的缩写的
npm run dev 其实执行的是
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
利用 webpack-dev-server 读取 webpack.dev.conf.js 信息并启动一个本地服务器,这应该也是新版本vue-cli的新特性。
以前老的项目是使用node的express开启一个本地服务器。
2、dependencies和devDependencies字段
dependencies字段指定了项目运行时所依赖的模块;
devDependencies字段是指定了项目开发时候所依赖的模块。
项目开发应使用的命令管理package.json文件:
npm i --save vue //自动写入到dependencies字段中
npm i --save-dev babel-core //自动写入到devDependencies字段
3、engines和browerslist字段
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
engines字段表示项目运行的所依赖的node以及npm的版本号;
browserslist表示项目的浏览器支持情况。
2.2build文件夹
1、基础配置文件 webpack.base.conf.js
基础的webpack配置文件主要根据模式(开发,线上等)定义了入口和出口,以及处理vue,babel等的各种模块,是最基础的部分。其他模式(开发,线上等)的配置文件是以base为基础通过webpack-merge合并的。
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) { //处理路径
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({ //Eslint检查规则
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'), //基础目录
entry: {
app: './src/main.js' //入口文件
},
output: {
path: config.build.assetsRoot, //输出文件,默认为../dist
filename: '[name].js', //输出文件名称
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath //生成模式publicpath
: config.dev.assetsPublicPath //开发模式
},
resolve: { //解析确定的扩展名,方便模块导入
extensions: ['.js', '.vue', '.json'],
alias: { //创建别名
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), //如‘@/components/helloWorld’
}
},
module: { //模块相关配置,包括loader,plugin等
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/, //vue要在babel之前
loader: 'vue-loader', //vue转成普通的html
options: vueLoaderConfig //可选项:vue-loader选项配置
},
{
test: /\.js$/, //babel
loader: 'babel-loader', //es6转es5 的loader
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{ //url-loader 文件大小低于指定的限制时,可返回DataURL,即base64
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, //url-loader图片
loader: 'url-loader',
options: { //兼容性问题需要将query换成options
limit: 10000, //默认没有限制
name: utils.assetsPath('img/[name].[hash:7].[ext]') //hash: 7da代表7位数的hash
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //url-loader音视频
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, //url-loader 字体
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: { //是否polyfill或mock
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',