2.设置淘宝镜像
2.1临时使用.
npm --registry https://registry.npm.taobao.org install express
2.2持久使用.
npm config set registry https://registry.npm.taobao.org
2.3验证是否成功
npm config get registry 或 npm info express
2.4.还原:
npm config set registry https://registry.npmjs.org/
1.npm install -g n
2.n stable (最新稳定版本)或者 n latest (最新版本)
1.安装新包:npm install -g @vue/cli
2.查看版本:vue --version 或者 vue -V
3.vue create projectName
4.Check the features needed for your project:
5.Use history mode for router
6.Pick a CSS pre-processor
7.Pick a linter / formatter config
8.Pick additional lint features
9.Pick a unit testing solutio
10.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
11.Save this as a preset for future projects
1.安装:npm install vue-i18n 或者 vue add i18n (Vue CLI 3)
2.选择默认环境:The locale of project localization. (en) 输入:zh
3.切换的环境The fallback locale of project localization 输入:en
4.打开项目,在src下新建lang目录
5.选择在src下的一个目录作为存放:The directory where store localization messages of project. It's stored under
src directory. (locales)
输入:lang
6.单引号设置:Enable locale messages in Single file components ? (y/N) 输入:y
7.查看目录lang,生成了zh.json en.json
1.命令安装:npm i --save-dev postcss
2.命令安装:npm isntall postcss-import
3.命令安装:npm i postcss-px-to-viewport
4.命令安装:npm i postcss-aspect-ratio-mini
5.命令安装:npm i postcss-cssnext
6.命令安装:npm i postcss-write-svg
7.命令安装:npm i postcss-viewport-units
8.命令安装:npm i cssnano-preset-advanced --save-dev
9.命令安装:npm install
10.打开项根目录下找到postcss.conf.js
改为:
11.npm run serve
项目打开成功如下图,样式单位由PX换位VM即为成功
使用方式:找到报错文件,右键Fix ESlint Problems即可,
注意:网上有两种方式:一种右键.eslintrc.js文件执行Fix ESlint 或者 Apply ESlint或者eslint --fix后再运行,报错会消失,但是错误并不会改正。
prettier3.7以上会优先读取项目根目录下的editorconfig or prettier config,如果有,就不会使用vscode setting中的设置,所以最好每个项目都配置一个单独的 prettier 配置文件。名字为: .prettierrc
根据需求自行修改,并保存。注释需去掉,不兼容 //
shift + alt + f,格式化的文件符合eslint要求
如果还有问题,配合 https://eslint.bootcss.com/ 来修改.eslintrc.js里的配置(注意要重跑项目才起效)
从我用过的方法,可以从两个层面来说,不过都是没有办法100%的精准和全面的。也可能还有一些更好的方法,不过我没用过。
代码检测
对于JS,可以使用JSHint或者ESLint进行进行代码检测,可以检测到每个代码里面你定义(或者引入)但是并没有用到的变量。你可以在你的编辑器里面安装相关插件,也可以通过在每次代码提交之前进行检测。相关使用方法可以看这里:ESLint,JSHint比如:我使用VI作为编辑器,截图中使用的是ESLint:
.
.
使用Chrome的 Dev Tool
Chrome从某个版本开始加入了Coverage,打开方式:
.
.
下图中,绿色的是页面使用到的CSS和JS代码,红色是未被使用的(注意,这里未被执行过,不代表没有用,只是代表还没被触发):
.