二、VUE环境搭建及创建项目
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 [email protected]: 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
+ [email protected]
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 [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> [email protected] 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 [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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
+ [email protected]
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 :[email protected], 检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再自己进行跟踪和修复。
3、启动项目
D:\Vue\my_vue>npm run dev