免备案空间网站,电子商务网站经营特色分析的主要内容包括,网站建设市场趋势,旅游示范校建设专题网站VUE项目框架配置
一、工具准备
Node.js安装 安装方法#xff1a;点击查看WebStorm安装 下载地址#xff1a;点击查看
二、环境准备
镜像准备
1.查看代理#xff1a;npm get registry 2.设置淘宝镜像
2.1临时使用. npm --registry https://registry.npm.taobao.org ins…VUE项目框架配置
一、工具准备
Node.js安装 安装方法点击查看WebStorm安装 下载地址点击查看
二、环境准备
镜像准备
1.查看代理npm get registry 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/
升级node.js(如果是新版本可跳过)
1.npm install -g n 2.n stable 最新稳定版本或者 n latest 最新版本 如果执行第二步报错Error: sudo required错误为权限不够。 执行命令 sudo n stable 或者 sudo n latest 即可 升级Vue CLI 3 Vue CLI 需要 Node.js 8.9 或更高版本,如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 1.安装新包npm install -g vue/cli 2.查看版本vue --version 或者 vue -V 3.vue create projectName 询问安装类型按键盘上下键选择默认default安装了balel、eslint其余要用什么需要手动再安装还是手动Manually,此处选择手动。 0.png 4.Check the features needed for your project: 询问项目的需求上下键切换空格选择回车确认。我选择如下 1.png 5.Use history mode for router 询问项目的路由模式是否使用History。我选择如下 2.png 6.Pick a CSS pre-processor 询问项目的CSS预处理器。我选择如下 3.png 7.Pick a linter / formatter config 询问项目的格式校验方式。我选择如下 4.png 8.Pick additional lint features 询问项目的什么时候校验格式(1是保存时2是提交时)。我选择如下 5.png 9.Pick a unit testing solutio 询问项目的测试框架 6.png 10.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 询问项目的配置文件存放在哪儿1是独立文件2是在package.json这里选择独立的文件选择2在后续配置postcs适配时存在问题。 7.png 11.Save this as a preset for future projects 询问保存该配置是否作为后续项目的可选配置选择是则会要求给该配置命名这个自己定就行,我输入为default-setting.配置后会在创建项目时vue create projectName 看到这个配置。 8.png 国际化配置 Vue I18n
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. Its stored under src directory. (locales) 输入lang 6.单引号设置Enable locale messages in Single file components ? (y/N) 输入y 7.查看目录lang生成了zh.json en.json
适配插件postcss安装
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 改为 module.exports {plugins: {postcss-import: {},postcss-aspect-ratio-mini: {},postcss-write-svg: {utf8: false},postcss-cssnext: {},postcss-px-to-viewport: {// 视窗的宽度对应的是我们设计稿的宽度一般是750viewportWidth: 750,// 视窗的高度根据750设备的宽度来指定一般指定1334也可以不配置viewportHeight: 1334,// 指定px转换为视窗单位值的小数位数unitPrecision: 3,// 指定需要转换成的视窗单位建议使用vwviewportUnit: vw,// 指定不转换为视窗单位的类可以自定义可以无限添加,建议定义一至两个通用的类名selectorBlackList: [.ignore, .hairlines],// 小于或等于1px不转换为视窗单位你也可以设置为你想要的值minPixelValue: 1,// 允许在媒体查询中转换pxmediaQuery: false},postcss-viewport-units: {filterRule: rule rule.selector.indexOf(::after) -1 rule.selector.indexOf(::before) -1 rule.selector.indexOf(:after) -1 rule.selector.indexOf(:before) -1},cssnano: {preset: advanced,autoprefixer: false,postcss-zindex: false}}
}
11.npm run serve9.png 新版的运行命令切换为了npm run serve可以在package.json中如下图位置查看更改 10.png 项目打开成功如下图样式单位由PX换位VM即为成功 注意事项
该转换在对img处理时需对img样式进行修改否则会导致手机端img不展示在app.js中增加下列代码 img {content: normal !important;}第一次打开项目时加载node_modules很慢可以在偏好设置中如下处理 部分webstrom默认设置的js格式不是ES6可如下处理 
eslint 自动格式化需新版webstrom 偏好配置如下 使用方式找到报错文件右键Fix ESlint Problems即可 注意网上有两种方式一种右键.eslintrc.js文件执行Fix ESlint 或者 Apply ESlint或者eslint --fix后再运行报错会消失但是错误并不会改正。
