vue-cli4创建项目具体步骤(当前最新版)

首先确保是否安装了vue-cli,若在项目中遇到下载失败问题

nrm ls //查看下载网路列表
nrm use 目标网路  //使用操作
nrm use taobao //使用taobao作为下载网路,taobao属于国内

vue-cli4创建项目具体步骤

1. 在本地新建文件夹(之后创建的 vue项目都会在这个目录下)
2. 进入该文件夹下,打开终端
3. 创建vue项目,通过 vue-cli4,(现在版本已经到4.0+)

vue create camp

• .下一步,我这里选择的是 第三项: 自行选择配置
  
• .选择需要的内容部分,这样创建的项目中就不需要自己重新创建了

1. 选择版本 vue2.0 or vue3.0
2. babel: es6转es7的语法;将各类 js 语法突破版本的限制,使浏览器能够识别并编译;
3. CSS pre-processors:样式预处理器选择
4. Linter / Formatter 表示代码风格检查和格式化。
   

• 选择版本,根据项目需要,我这里是2.0+
  

• 选择是否以history模式进行路由映射,我这里是选择的:no,也就是以hash模式
  

• 选择预处理器,我是less,根据自己需要
  

• 接下来我选择第三个,选择哪一个自动化代码格式化进行检测，配合 vscode
  

• 我选择保存立即校验代码格式,第二个意思是 修改后 和 提交 时进行校验
  

• 我选择的是第一个:将包分类存放,.第二个是将包配置放在package.json中
  

• 回车之后有个选择是否存储本次项目配置,主要是便于下次创建项目时更快,如果输入 Y 就不需要再次一项一项的配置了，

• 我输入:n，然后直接回车等待项目创建完成就可以啦
  

• 这里等待的时间会比较长,所以可以去看看vue-cli配置官方文档

• 完成之后就是这样的,可以直接 cd 到目标目录下,直接运行即可
  

• 复制地址,到浏览器中直接访问即可(地址二选一),看到下面这个页面就成功啦
  
  

• 项目初始化处理

  1. 修改部分默认项
  2. 删除不必要的文件或文件夹
  3. 新增目录及文件

1. app.vue 修改后:

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

<style lang="less"></style>

1. src / router / index.vue 修改后:
   
2. 删除不必要的文件及资源

• src/views/About.vue
• src/views/Home.vue
• src/components/HelloWorld.vue
• src/assets/logo.png

3. 增加目录及文件

• src/api 目录
  存储接口模块
• src/utils 目录
  存储一些工具模块
• src/styles 目录
  index.less 文件，设置全局样式
  在 main.js 中加载全局样式 import ‘./styles/index.less’
  做到这里,项目初始化就算完成啦,目录结构如下:
  
  冲啊🌈