npm+@vue/cli+vscode学习笔记

#vue-cli 脚手架

npm 安装配置

1. https://nodejs.org/en/download/ 下载最新版nodejs
2. 安装(可修改路径)一路next 完成后查看系统环境变量的path变量是否包含nodejs的目录
3. 可用node -v 或 npm -v 查看是否安装成功
4. 在安装目录下创建全局安装目录和缓存目录
   node_global node_cache
5. 修改node的对应目录
   npm config set prifix “{安装目录}\node_global”
   npm config set cache “{安装目录}\node_cache”
6. 修改源地址(国外源下载慢)
   npm config set registry http://registry.npm.taobao.org
   npm config get registry 查看修改是否成功
7. 在系统环境变量中创建NODE_PATH,值为"${安装目录}\node_modules"
8. 编辑用户环境变量里的Path, 将相应的npm的路径改为"${安装目录}\node_global"

vue cli 安装

npm i @vue/cli -g

sudo npm i @vue/cli -g ----苹果和linux系统命令

这是3.0以上版本的安装命令

创建项目

1. 执行 vue ui 打开可视化创建项目
2. 选择创建项目的文件夹,输入项目名称
3. 选择手动配置项目
4. 除默认项外, 选择router vuex
5. 选择ESLint + standard config

vs code 插件

1. vscode-icons vscode的图标
2. Auto Close Tag 自动关闭标签
3. Auto Rename Tag 标签自动改名
4. Color Highlight 颜色增强在 #fff 处直接显示颜色
5. koroFileHeader 文件头及函数注释
6. Vetur vue插件
7. Bracket Pair Colorizer 对应括号变色+
8. Path Intellisense 路径自动补全提示
9. One Dark Pro 主题
10. Turbo Console Log 快速输入console打印变量
11. vscode-element-helper element的插件
12. Element UI Snippets 配合上面的使用
13. JavaScript (ES6) code snippets es6的插件
14. beautify 美化代码,格式化代码

安装项目中使用的包(常用的)

npm i **** --save-dev 安装开发依赖

npm i **** --save 安装上线依赖

安装时使用 --save-dev 命令安装 打包时不用再次安装

序号	命令	注释
1	npm i element-ui --save-dev	饿了么UI 前端组件库
2	npm i font-awesome --save-dev	字体图标库
3	npm i axios --save-dev	ajax请求库
4	npm i jquery --save-dev	jquery插件库
5	npm i js-cookie --save-dev	js cookie库
6	npm i vue-wechat-title --save-dev	动态设置title
7	npm i nprogress --save-dev	控制进程暂停