新建VUE项目

Vue: 更先进的理念 -- 工程化, 自动化

国人在 2014 年首次推出的 框架 , 目前占据 王者地位

vue 目前最新版本是 3

vue1: 已淘汰

vue2: 目前主流版本

vue3: 以后的发展趋势  

下面来一起下载创建vue框架项目 

1. 生成脚手架:npm install -g @vue/cli    (镜像为淘宝镜npm i -g@vue/cli 像)
   
   在一个文件夹里打开cmd , 输入npm i -g@vue/cli 生成脚手架
    

   C:\Users\Administrator\Desktop\新建文件夹>npm i -g@vue/cli
   npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\新建文件夹\package.json'
   npm notice created a lockfile as package-lock.json. You should commit this file.
   npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\新建文件夹\package.json'
   npm WARN 新建文件夹 No description
   npm WARN 新建文件夹 No repository field.
   npm WARN 新建文件夹 No README data
   npm WARN 新建文件夹 No license field.
   
   up to date in 0.957s
   found 0 vulnerabilities

2. 生成项目包:vue create 包名称   (自定义,如:xuezi-pro)

   C:\Users\Administrator\Desktop\新建文件夹>vue create vuedemo
   

3. 选择需要的框架版本

   C:\Users\Administrator\Desktop\新建文件夹>vue create vuedemo
   
   
   Vue CLI v5.0.7
   ┌─────────────────────────────────────────┐
   │                                         │
   │   New version available 5.0.7 → 5.0.8   │
   │                                         │
   └─────────────────────────────────────────┘
   
   ? Please pick a preset: (Use arrow keys)
     Default ([Vue 3] babel, eslint)
     Default ([Vue 2] babel, eslint)
   > Manually select features

   这里的选项有vue3、vue2、和自定义（自选功能），这里我们使用自选功能，满足使用需求（这里是我通常使用的功能）
   【空格】进行选择取消，【回车】运行下一步
    

   ? Please pick a preset: Manually select features
   ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
   <enter> to proceed)
    (*) Babel                       //允许我们使用ES6模块化语法，默认选中
    ( ) TypeScript                  //js的升级版本，增加了强定义类型
    ( ) Progressive Web App (PWA) Support    //如果开发项目是移动端，请勾选
    (*) Router                      //vue中的路由组件，非常好用
    (*) Vuex                        //vue中的状态管理组件
   >(*) CSS Pre-processors          //css 预处理，如果使用到了SCSS和less，请勾选
    ( ) Linter / Formatter          //代码格式语法检测，
    ( ) Unit Testing                //Unit Testing测试工具
    ( ) E2E Testing                 //E2E Testing测试工具
   

   选择完成后，【回车】下一步，2.x 是VUE2主流vue框架，3.x是vue3最新vue框架(自行选择，本人使用vue2)
    

   ? Please pick a preset: Manually select features
   ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
   ? Choose a version of Vue.js that you want to start the project with
     3.x
   > 2.x
   

   后面就是一路回车加确认，【即可完成】

4. 用开发软件打开项目包，或者打开项目包cmd文件夹，输入npm run serve运行项目
   （这里需要node.js版本在12.0.0及以上，否则运行会报错）
    

   C:\Users\Administrator\Desktop\新建文件夹\vuedemo>npm run serve
   
   > vuedemo@0.1.0 serve C:\Users\Administrator\Desktop\新建文件夹\vuedemo
   > vue-cli-service serve
   
    INFO  Starting development server...
   
    DONE  Compiled successfully in 2655ms                                                                10:23:08 ├F10: AM┤
   
     App running at:
     - Local:   http://localhost:8080/
     - Network: unavailable
   
     Note that the development build is not optimized.
     To create a production build, run npm run build.
   
   

5. 浏览器访问:http://localhost:8080/    即可看到项目页面
   
   
   （如有帮助，点赞加关注，追代码不迷路）

Vue-cli工程中每个文件夹和文件的用处

• dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
• node_modules：存放npm命令下载的开发环境和生产环境的依赖包
• public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
• src文件夹：存放项目源码及需要引用的资源文件
• src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
• src-common文件夹：stylus的混合文件.styl，不要写到public也可以
• src-components文件夹：存放vue开发中抽离的一些公共组件
• src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
• src-pages文件夹：涉及到路由的组件
• src-router文件夹:vue-router，路由器及路由的配置
• src-store文件夹：存放 vue中的状态数据，用vuex集中管理
• App.vue文件：使用标签渲染整个工程的.vue组件
• main.js文件：vue-cli工程的入口文件
• package.json文件：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理
• build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库
• config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等