vue脚手架的配置（超详细步骤）以及目录结构解释

进阶学习

搭建vue-cli

vue-cli自动化构建工具，用nodejs写的，是一个高度封装的webpack

cnpm install -g @vue/cli

项目入门

要求有nodejs环境

node -v
nmp -v

如果没有请看另一篇文章。
NodeJs的环境搭建以及模块管理

创建项目

命令行模式：

vue create 文件名
#第一个是让你选择下载镜像的
Your connection to the default npm registry seems to be slow.   
   Use https://registry.npm.taobao.org for faster installation?
#第二个选择配置信息的
#方向键上下选择，回车建确定。
Please pick a preset:
#选择自动配置后
#空格选择，方向键上下挪动，回车下一步
 (*) Choose Vue version #版本
 (*) Babel #js编译器
 ( ) TypeScript #语言
 ( ) Progressive Web App (PWA) Support #渐进式web开发       
>(*) Router #路由
 ( ) Vuex #状态管理
 ( ) CSS Pre-processors #CSS预处理器
 (*) Linter / Formatter #代码格式化处理
 ( ) Unit Testing #单元测试
 ( ) E2E Testing #多对多测试
 #版本选择
 Choose a version of Vue.js that you want to start the project with
 #Pick a linter / formatter config: 
 > ESLint with error prevention only#  只进行报错提醒
  ESLint + Airbnb config            #  不严谨模式
  ESLint + Standard config          #  正常模式
  ESLint + Prettier                 #  严格模式
  TSLint (deprecated)               #  ypeScript格式验证工具
 #Pick additional lint features:
 (*) Lint on save               # 保存时检测
 ( ) Lint and fix on commit     # 修复和提交时检测
 #配置文件位置选择
 Where do you prefer placing config for Babel, ESLint, etc.
 In dedicated config files#放在专用的配置文件
 In package.json#全在一起
 #是否要保存此类配置
 Save this as a preset for future projects?
# 选择单元测试的解决方案 常选 Mocha + Chai
Pick a unit testing solution
  Mocha + Chai
  Jest
 #配置名称输入
 
 #有的会让选择打包工具

ui模式：

vue ui

按步骤走就可以。

项目的目录结构

.git是git版本控制的工具。

node_modules是存放依赖包的地方。

public中存放静态文件。

src/assets中存放资源。

src/components存放组件。

App.vue根组件。

main.js是程序入口。

.gitgnore是git控制时忽略的文件。

balel.config.js是编译的配置文件。

package-lock.json是包相关内容。

package.json是包相关内容

项目的运行与打包

#运行
npm run dev
#打包
npm run build

项目配置

应用的部署地址：

{% asset_img socureurl.png 资源路径 %}

此时会多一个配置文件，vue.config.js

module.exports = {
  publicPath: ''
}