vue脚手架vue

vue脚手架vue

vue-cli的模板

vue-cli的脚手架项目模板有webpack-simple 和 webpack

两种的区别在于webpack-simple 没有包括Eslint 检查等功能

vue-cli的项目结构

.

|-- build // 项目构建(webpack)相关代码

| |-- build.js // 生产环境构建代码

| |-- check-version.js // 检查node、npm等版本

| |-- dev-client.js // 热重载相关

| |-- dev-server.js // 构建本地服务器

| |-- utils.js // 构建工具相关

| |-- webpack.base.conf.js // webpack基础配置

| |-- webpack.dev.conf.js // webpack开发环境配置

| |-- webpack.prod.conf.js // webpack生产环境配置

|-- config // 项目开发环境配置

| |-- dev.env.js // 开发环境变量

| |-- index.js // 项目一些配置变量

| |-- prod.env.js // 生产环境变量

| |-- test.env.js // 测试环境变量

|-- src // 源码目录

| |-- components // vue公共组件

| |-- store // vuex的状态管理

| |-- App.vue // 页面入口文件

| |-- main.js // 程序入口文件，加载各种公共组件

|-- static // 静态文件，比如一些图片，json数据等

| |-- data // 群聊分析得到的数据用于数据可视化

|-- .babelrc // ES6语法编译配置

|-- .editorconfig // 定义代码格式

|-- .gitignore // git上传需要忽略的文件格式

|-- README.md // 项目说明

|-- favicon.ico

|-- index.html // 入口页面

|-- package.json // 项目基本信息

package.json文件

自定义npm相关命令

在package.json文件里有一个scripts字段。

"scripts": {

"dev": "node build/dev-server.js",

"build": "node build/build.js"

}

在开发环境下，在命令行中运行npm run dev就相当于在执行node build/dev-server.js。所以script字段是用来指定npm相关命令的缩写的。

dependencies字段和devDependencies字段

dependencies字段指定了项目运行时所依赖的模块

devDependencies字段指定了项目开发时所依赖的模块(项目环境依赖)

在命令行中运行npm install命令，会自动安装dependencies和devDependencieMrraus字段中的模块。

webpack配置相关

详情在webpack相关博客

dev-server.js

...

...

// http-proxy可以实现转发所有请求代理到后端真实API地址，以实现前后端开发完全分离

// 在config/index.js中可以对proxyTable想进行配置

var proxyMiddleware = require('http-proxy-middleware')

...

...

// 热加载要使用webpack-dev-middleware在没有webpack-dev-server的时候进行热加载

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// 当html-webpack-plugin模板改变是强制进行页面重新加载

compiler.plugin('compilation', function (compilation) {

compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {

hotMiddleware.publish({ action: 'reload' })

cb()

})

})

webpack.base.conf.js

...

...

module.export = {

// 编译入口文件

entry: {}Mrrau,

// 编译输出路径

output: {},

// 一些解决方案配置

resolve: {},

resolveLoader: {},

module: {

// 各种不同类型文件加载器配置

loaders: {

...

...

// js文件用babel转码

{

test: /\.js$/,

loader: 'babel',

include: projectRoot,

// 哪些文件不需要转码

exclude: /node_modules/

},

...

...

}

},

// vue文件一些相关配置

vue: {}

}

check-version.js

这个文件主要是用来检测当前环境中的node和npm版本和我们需要的是否一致的。

// 加载语义化版本测试库

var semver = require('semver')

// 定制控制台日志的输入样式

var chalk = require('chalk')

// 引入package.json文件

var packageConfig = require('../package.json')

var exec = function (cmd) {

return require('child_process')

.execSync(cmd).toString().trim()

}

// 定义node和npm版本需求所组成的数组

var versionRequirements = [

{

name: 'node',

currentVersion: semver.clean(process.version),

versionRequirement: packageConfig.engines.node

},

{

name: 'npm',

currentVersion: exec('npm --version'),

versionRequirement: packageConfig.engines.npm

}

]

module.exports = function () {

var warnings = []

// 依次判断版本是否符合要求

for (var i = 0; i < versionRequirements.length; i++) {

var mod = versionRequirements[i]

if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {

warnings.push(mod.name + ': ' +

chalk.red(mod.currentVersion) + ' should be ' +

chalk.green(mod.versionRequirement)

)

}

}

...

}

.babelrc

Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码

// 设定转码规则

"presets": ["es2015", "stage-2"],

// 转码的一些插件

"plugins": ["transform-runtime"],

"comments": false

.editorconfig

该文件定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要。

root = true

[*] // 对所有文件应用下面的规则

charset = utf-8 // 编码规则用utf-8

indent_style = space // 缩进用空格

indent_size = http://2 // 缩进数量为2个空格

end_of_line = lf // 换行符格式

insert_final_newline = true // 是否在文件的最后插入一个空行

trim_trailing_whitespace = true // 是否删除行尾的空格

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。