Vue脚手架环境搭建及项目目录结构

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

Vue脚手架

vue脚手架指的是vue-cli

它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板

---

webpack可以看做是模块打包机: 它会分析项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言[Scss、TypeScript]等，并将其打包为合适的格式以供浏览器使用

脚手架安装

要想使用vue脚手架

• windows下配置cnmp环境

首先通过nodejs官网下载nodejs，这之后你将具有一个类似pip的包管理工具npm

默认的使用NPM可能会因为网络问题而导致无法使用或延迟居高，可以使npm升级为cnpm，从国内淘宝镜像中加载所需的npm软件源

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 设置安装包缓存路径

cnpm config set cache "C:\nodejs\node_cache"

• 设置安装包位置

cnpm config set prefix "C:\nodejs\node_global"

之后使用-g命令安装的模块存储在C:\nodejs\node_global\node_modules里

请按照个人需求设置你的文件位置

npm config set cache "C:\nodejs\node_cache"

webpack 可以帮助自动对js、css等资源进行打包，避免了多次对vue.js的导入使用，可以方便的进行路由管理

• 安装vue脚手架

cnpm install vue-cli -g

-g参数代表全局位置安装，这样可以在环境变量生效的情况下直接在命令行等工具下使用vue命令行进行项目的开启

---

如果是使用mac的同学道理是类似的，通过安装nodejs之后，设置npm，并安装vue即可，如果无法使用命令，可以检查环境变量配置等问题

第一个项目

通过vue-cli脚手架开启一个项目

vue init webpack myproject

- Project name: 项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。
- Project description: 项目描述，直接回车
- Author：作者
- vue build: 构建方式 默认即可
- install vue-router? 是否安装vue的路由插件

- Use ESLint to lint your code? 是否使用ESLint检测你的代码？
	（ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）
	
- Pick an ESLint preset:选择分支风格
	1.standard(https://github.com/feross/standard) js的标准风格
	2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github	地址说是JavaScript最合理的方法
	3.none (configure it yourself) 自己配置
	
- Setup unit tests? 是否安装单元测试
- Pick a test runner 选择一个单元测试运行器
	1.Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架）
	2.Karma and Mocha
	3.none
	
- Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch
	（E2E，也就是End To End，就是所谓的“用户真实场景”。）
	
- Should we run 'npm install' for you after the project has been created?
项目创建后是否要为你运行“npm install”?
	yes,use npm(使用npm)
	yes,use yarn(使用yarn)
	no,I will handle that myself(自己操作)

• 启动开发服务器

cd myproject # 进入目录
cnpm install # 安装依赖
cnpm run dev # 开启服务

vue启动服务之后，是通过一个小型的express服务进行测试开发环境部署，在这个服务中，主要是通过webpack-dev-middleware和webpack-hot-middleware这两个中间件完成，并且会在每次代码对于src目录下的代码进行修改时，服务端会动态检测并让浏览器自动刷新

• 项目目录介绍

- src # 主开发目录，所有的单文件组件都会放在这个目录下
- static # 项目静态目录，所有的css、js都会放在这个文件夹下
- dist # 项目打包发布文件夹，最后要上线单文件夹项目都在这个文件夹中
- node_modules # node的包目录
- config # 配置目录，主要用于区分开发环境，测试环境，线上环境的不同
- build # 项目打包时依赖的目录，之后这其中的内容将会部署发布

App.vue

在vue项目中，App.vue文件用来渲染子组件页面，同时要记得去掉vue的logo

<template>
  <div id="app">
    <router-view />
  </div>
</template>