从零到一详聊创建Vue工程及遇到的常见问题(2)

1.最好使用cnpm代替npm安装依赖,因为开发过程中少部分包如果用npm是无法下载完成,一直卡住,换为cnpm毫无压力记得加上--save选项,否则别人安装的话会缺少包.

2.路径说明

‘/‘, 表示项目根目录

‘./‘,表示当前目录

‘../‘ ,表示上一级目录,可以连续多个,比如‘../../../‘表示往外层退3级目录

3.所有组件的数据都必须放置在data函数返回的对象中,无论是否有数据,否则会报错。
4.一个template组件下只能有一个并列的div,否则报错。

5.ESLint 格式问题

1.vue 创建项目时,ESLint 选择启用时候,因 ESLint 代码检查极其严格,缩进空格数量,尾部空行等皆在检查之列,可以选择关闭。

build/webpack.base.conf.js 注释掉 module->rules 中 ESLint 规则,关闭代码:

//...(config.dev.useEslint ? [createLintingRule()] : []),

规范起见,修改 .eslintrc.js 文件 rules 节点,关闭指定格式检查。

例如'semi': ['off', 'always'], 需要分号的地方即录入,否则 ESLint 强制检查不录入分号。说明参照https://eslint.org/docs/rules/semi。随后重新 npm run dev 即可。完整说明参照https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md。或者在.eslintignore文件下配置相关忽略ESlint检查的文件格式,如:*.js,eslint则默认忽略根目录下所有的js文件。

2.Tab Size 调整

多数开发工具 Tab Size 默认 4,ESLint 默认 2,需要将开发工具 Tab Size 默认值调为2或关闭 ESLint

3.VUE 脚本结束标志 </script> 或者.vue文件结尾</style>不能作为文件结尾,其后必须另起一行写入其它代码,必要时插入空行.

常见问题:

1.npm run dev 提示 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

not found module ‘xxx'

原因:依赖库不完整
方案:项目所在目录运行 npm install xxx -S 安装相关依赖包,或按照如下指定安装相关版本,npm install xx@版本号 -S。

2.安装插件提示 npm WARN rollback Rolling back ...... failed (this is probably harmless): EPERM: operation not permitted

原因:npm 权限不足

方案:安装所在目录设置权限

npm config set user 0 npm config set unsafe-perm true

3.npm run build 后,打包生成的dist文件本地测试发现404错误。

原因:本地测试当前文件默认路径以‘./'开头,vue配置文件中默认以‘/'开头

方案:设置config/index.js中assetsPublicPath属性值为‘./'

vue项目启动原理

1.读取 package.json 文件 scripts 内部节点,例 start / build / dev 节点,根据节点值获得相应启动参数

2.Webpack配置项目入口文件,出口文件名。

在.\build\webpack.base.conf.js文件配置入口文件module.exports.entry值即项目总入口,默认为 ./src/main.js。

在config/index.js文件中build对象assetsRoot中配置打包后文件名。

3../src/main.js。页面入口js文件,实例化一个Vue,平且引入vue和主入口组件。componens和template属性缺一不可。

new Vue({ el: '#app', router, components: { App }, // 定义组件映射 template: '<App/>' // 定义组件模板 })

1.打包项目提交到Svn或github注意不要提交node_modules文件夹,以免造成资源浪费

附件

1.帮助文档

vuex状态管理库:https://vuex.vuejs.org/zh/guide/

vue中文网:https://cn.vuejs.org/

vue-axioshttps://www.npmjs.com/package/vue-axios

vue-routerhttps://router.vuejs.org/zh/

webpack中文网https://www.webpackjs.com/

2.安装 cnpm 淘宝镜像避免FQ

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后安装相关命令可用 cnpm 代替 npm。

淘宝镜像包与原包存在一定差异,避免莫名其妙问题起见,尽量使用原包命令 npm 安装,可以使用 hosts FQ模式。

3.依赖包出错删除重装

删除全局包

npm uninstall -g 包名

删除本地包

npm uninstall 包名

不成功可以采用 remove 代替 uninstall

4.引用外部 js

引用外部 js 有全局引用、VUE 外部引用、VUE 内部引用等多种方法

1.内部引用

A. 安装模块至项目目录(jQuery案例)

npm install jquery --save

B. 确认 package.json dependencies 节点已添加依赖
"jquery": "^3.3.1",

C. Vue 文件直接引用

import $ from 'jquery'

2.全局引用

A. 在package.json中添加依赖文件dependencies:{"jquery":"^2.2.1"} //可以自己指定版本

B. 重新安装项目依赖cnpm install

c. 在webpack.base.conf.js中module.exports中提供一个全局变量:$

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5f7a651d7b7b8e84b79091e2a468db8f.html