(二)、WebStorm通过命令创建vue项目(脚手架)
webStorm基础环境
一、创建Vue项目命令：
1、控制台输入命令： vue init webpack 项目名
2、项目名：回车
3、项目描述：回车
4、作者：回车
5、热部署：回车
6、vue热部署：Y
7、代码检验：n
8、单元测试：n
9、e2ec测试：n
10、我们在创建项目后为你运行"npm install" 吗？：回车
11、等待项目下载脚手架......
效果如下：
E:\Code-web>vue init webpack hello ? Project name hello ? Project description A Vue.js project ? Author xiaogao ? Vue build standalone ? Install vue-router? Yes ? 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? (recommended) npm vue-cli · Generated "hello". # Installing project dependencies ... # ======================== npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility ta ble on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash. npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated acorn-dynamic-import@2.0.2: This is probably built in to whatever tool you're using. If you still need it... idk npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated consolidate@0.14.5: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release cha ngelog npm WARN deprecated html-webpack-plugin@2.30.1: out of support npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is know n to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0 npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features! npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details. npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web c ompatibility issues. Please, upgrade your dependencies to the actual version of core-js. added 1297 packages in 3m # Project initialization finished! # ======================== To get started: cd hello npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack E:\Code-web>cd hello E:\ Code-web\hello>npm run dev > hello@1.0.0 dev > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js (node:12652) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated. (Use `node --trace-deprecation ...` to show where the warning was created) 12% building modules 24/28 modules 4 active ...=0!E:\moyanCode-web\hello\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser : "babel" }. 95% emitting DONE Compiled successfully in 1832ms 02:12:15 I Your application is running here: http://localhost:8081
二、运行 项目
1、进入当前项目
cd 项目名
2、运行当前项目
npm run dev
三、查看Vue项目的版本
创建项目后，找到根项目下package.json中的内容dependencies(就是当前项目的版本)
四、Vue项目中安装相关依赖包
1、前提：进入自己的项目
cd 项目名
2、安装依赖
npm install
3、常见依赖包安装
3.1、网络请求axios依赖包（异步请求）
npm install axios -save
3.2、安装less依赖包（对css的扩展）
npm install --save-dev less less-loader
3.2、安装饿了么（element-ui）美化页面
npm i element-ui -S
3.3、axios低版本浏览器补丁es6-promise依赖包
npm install --save es6-promise
3.4、状态管理安装
npm install --save vuex
3.5、cookie封装库
npm install --save js-cookie
3.6、生成二维码
npm i qrcodejs2 -S
https://blog.csdn.net/weixin_41897680/article/details/114383794?spm=1001.2014.3001.5501
