最新vue cli4构建vue项目架构

直接上干货

经过后面流程后得到最新vue cli4.4项目架构:

1、安装vue cli4

在npm环境下（注意一定配置npm代理，不然下载很慢），执行如下命令：

npm install -g @vue/cli

2、查验版本

vue --version

3、创建项目 test-web-vue-t1

<1>执行如下命令:

vue create  test-web-vue-v0

如下图：

<2>上下箭头选择Manually select features,之后回车,如图：

<3>选择配置（注：空格键是选中与取消，A键是全选）
选择如下(选完后，切到最后一行，回车）：

<4> 继续选择：Use history mode for router? 填写n

<5>选择css预处理， Pick a CSS pre-processor选择Stylus
如图：

<6>配置选项Pick a linter / formatter config，选择ESLint + Prettier（更精致的）

<7>选择语法检查方式，这里我选择保存就检测，Pick additional lint features:选择Lint on save

<8>选择单元测试，Pick a unit testing solution:选择Jest
<9>选择babel,postcss,eslint这些配置文件存放位置，选择放在独立文件夹，

 Where do you prefer placing config for Babel, ESLint, etc.?

选择In dedicated config files

<10>是否保存预设，我选择保存，输入y,
之后保存名为： pre-test-vue-test1
<11>回车后开始下载：

漫长等待后，下载成功：

<12>得到如下vue项目框架，结构：

<13>进入项目根目录，启动项目

 cd test-web-vue-t1
 #启动服务后，会自动把所有依赖装配到 /public/index.html 文件中，并且生产到 dist/
 npm run serve

<14>进入启动成功后提示网址：http://localhost:8080/
结果如下图：

总结：如上就是整个vue架构搭建过程。谢谢评鉴。