二、VUE环境搭建及创建项目

偏执的太偏执、 2022-05-13 15:41 374阅读 0赞

#                                                 VUE环境搭建及创建项目 #

### 1、命令行工具 (CLI,command-line interface,命令行界面）安装 ###

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

安装vue-cli构建工具：

C:\WINDOWS\system32>npm install --global vue-cli
    npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
    C:\Users\yang\AppData\Roaming\npm\vue-init -> C:\Users\yang\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
    C:\Users\yang\AppData\Roaming\npm\vue -> C:\Users\yang\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
    C:\Users\yang\AppData\Roaming\npm\vue-list -> C:\Users\yang\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
    + vue-cli@2.9.6
    added 236 packages from 205 contributors in 122.898s

### 2、使用VUE\_CLI创建一个项目 ###

#### 2.1、创建项目 ####

D:\Vue>vue init webpack my_vue                   //my_vue是项目名
    
    ? Project name vuebase
    ? Project description new project
    ? Author yang <yang>
    ? Vue build standalone
    ? Install vue-router? No                            //路由
    ? Use ESLint to lint your code? No                  //代码检查
    ? Set up unit tests No                                      //测试版
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (rec
    ommended) npm                     //是否使用npm install安装依赖
    
       vue-cli · Generated "my_vue".
    
    
    # Installing project dependencies ...
    # ========================
    
    npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
    npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    
    > uglifyjs-webpack-plugin@0.4.6 postinstall D:\Vue\my_vue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
    > node lib/post_install.js
    
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    added 1126 packages from 646 contributors and audited 10641 packages in 139.374s
    found 1 moderate severity vulnerability
      run `npm audit fix` to fix them, or `npm audit` for details
    
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd my_vue
      npm run dev
    
    Documentation can be found at https://vuejs-templates.github.io/webpack

init：表示我要用vue-cli来初始化项目
    
    <template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，
    
    webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
    
    webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
    
    browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
    
    browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
    
    -simple-一个最简单的单页应用模板。
    
    <project-name>：标识项目名称，这个你可以根据自己的项目来起名字

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

*  Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
 *  Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
 *  Author：作者，如果你有配置git的作者，他会读取。
 *  Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
 *  Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
 *  setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
 *  Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

#### 2.2、安装项目依赖 ####

peer是辅助库更新 ：

D:\Vue\my_vue>npm i ajv
    + ajv@6.5.4
    added 3 packages from 1 contributor, updated 3 packages and audited 10656 packages in 17.716s
    found 0 vulnerabilities

安装项目依赖：

D:\Vue>cd my_vue
    
    D:\Vue\my_vue>npm install
    audited 10656 packages in 19.698s
    found 0 vulnerabilities

漏洞修复：

D:\Vue\L3_Vuex>npm audit fix
    up to date in 10.842s
    fixed 0 of 0 vulnerabilities in 10658 scanned packages
    
    
    npm audit fix ：npm@6.1.0,  检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖，而不必再自己进行跟踪和修复。

### 3、启动项目 ###

D:\Vue\my_vue>npm run dev

![在这里插入图片描述][70]

[70]: /images/20220504/dd767e77101c4d349a7cbd1e69f4cc38.png