Vue脚手架的安装配置以及搭建和内部目录结构----windows下

vue脚手架的安装配置以及搭建和内部目录结构

1、脚手架的安装

终端中输入 cnpm i @vue/cli -g   // -g是全局安装

如何安装 node以及更换淘宝镜像源，这里不再阐述,指路之前所记录的。提示：这里的node版本不能过低，否则会出错。
https://www.cnblogs.com/ShmilyM/p/13456844.html

vue -V  # 输出:@vue/cli 4.x.x  说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )
 //这里的 V是 大写的

2、创建一个项目，

• 安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹

• 终端中输入: vue create 项目名称
  

  
  
  

  • 第一次安装时，这里有3个选项，上面两个是默认选项，最后的手动选项。使用↑和↓选择预设，可以选择最后一项 Manually select features 手动选择功能，选中后回车。
    
    

  • 这里我选择了手动选择，然后可以手动选择你项目需要的功能，使用↑和↓移动，空格键选中或取消，选择好后回车，进入下一步
    

    
    

  • 这里是我的一些选项。
    

    
    
    

  • 最后会让你选择是否保存，当前的预设配置供以后的项目使用，这就看你的意愿了，选择保存会让你输入预设的名字，输入后回车进入下一步。
    
    

  • 接下来，选择安装依赖项时要使用的程序包管理器，我这里选择yarn回车，然后就开始创建项目了
    

    
    

  • 然后等待项目创建，等啊等。如果卡住了就再重来一次。这里提示一下 如果拷贝别人创建好的项目(最好不要node_modules文件夹)，拷贝过来使用yarn 或者npm i安装依赖即可
    
    

  • 创建完成后使用 yarn serve 即可运行项目。[如果之前一步你选择的是npm管理，这里是npm run serve]
    
    
    
    

  
  

创建时遇到一个报错，spawn yarn ENOENT 
解决方式: 更新yarn    cnpm i yarn -g

3、项目目录结构

项目文件夹及文件

 node_modules   //依赖包【项目中使用的模块插件】
 public    //静态资源文件夹
 src    //源代码开发目录
 .browserslistrc    //浏览器支持度配置文件[不动的]
 .eslintrc.js     //eslint语法检测配置文件 
 .gitignore     //git上传忽略配置文件 
  babel.config.js    //优雅降级配置文件   es高版本语法 -> es5 
  package.json    //项目命令记录文件和依赖记录文件
  README.md     //项目说明文件
 yarn.lock   //用于锁定项目中插件的版本
 

项目文件夹下src目录下的结构

> assets     //静态资源文件 [里面可以放img、css、fonts文件]
> components    //公共组件
> App.vue    //主组件
> main.js    //入口文件
router    //路由
store      // 状态管理器
views   //视图页面