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


Posted in Javascript onApril 25, 2019

准备工作

1.判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm

npm install -g cnpm --registry="cnpm"全局安装淘宝cnpm。

2.开发工具选择很多,VUE无专用开发工具,开发项目多以SPA形式体现,本例使用 Visual Studio Code。

3.调试工具选择很多,官方推荐 vue-devtools 。

安装方法:FQ或者github主页。https://github.com/vuejs/vue-devtools下载压缩包,解压到Chrome扩展程序。

环境搭建

1.安装 Node.js 10.15.3, npm包管理工具(高版本node.js自带npm)。

安装完成后,DOS命令行输入命令检查安装情况npm -v,出现npm版本号即可。

 下载地址https://nodejs.org/en/download/

2.全局安装 vue-cli脚手架

DOS命令行安装(-g 参数表示安装至 npm 工作路径,以后任意位置均可访问)

npm install -g vue-cli

3.安装 开发工具 Visual Studio Code

1.下载地址 https://code.visualstudio.com/Download

注意 User Installer / System Installer 不同(建议安装系统版本)

2.安装 Vetur ,vue 2 snippets插件

文件 -> 首选项 -> 扩展 -> 搜索 -> 输入 Vetur/vue 2 snippets -> 安装

3.安装 语言包(视个人喜好)

文件 -> 首选项 -> 扩展 -> 搜索 -> 输入 Chinese(Simplified)... -> 安装

4.打开文件夹... 开发已存在项目

4.安装 vue-devtools。

1.下载 https://github.com/vuejs/vue-devtools

2.DOS 命令进入解压后目录

 修改 \shells\chrome\manifest.json中 background 节点 persistent 值为 true

3.运行 npm install 命令安装依赖包。

进度条等待完成,大约5-15分钟,必要使用cnpm

4.运行 npm run build(一定要执行这步,不然后面会报错)

5.启动 Google Chrome -> 输入 chrome://extensions/ -〉确认打开“开发者模式” -> 加载已解压扩展程序 -> 选择 shells\chrome 确定即可安装

初始化项目

初始化项目有多种方式,建议采用 Webpack 模板模式

1.进入需要创建Vue项目文件夹,打开DOS命令行输入:vue init webpack 项目名称

2.然后终端会出现下图“一问一答”模式

“Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车

“Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试,所以这里选择的是”N”

“Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N”

3.下载依赖包

cd ‘项目文件' 终端执行命令:npm install .这个过程会生成一个node_modules 文件夹

4.调试项目

终端输入:npm run dev/start

5.打开Google Chrome ,默认项目地址:localhost://8080,访问即可。F12启用开发者调试工具,调试菜单栏选择 Vue

开发过程

1.相关文件说明

build和config >webpack配置相关文件

node_modules>项目需要的模板文件

src/main.js>入口js文件

src/assets>公共的样式,图片文件

src/components>各种vue组件文件

src/App.vue>页面主组件

src/router>vue-router 路由配置文件

static>静态资源文件(不会被webpack处理)

.eslintrc.js>eslint检查配置文件

.editorconfig>代码编辑环境配置文件

.eslintignore>eslint检查忽略文件

.babelrc>babel编译参数配置文件

index.html>主页,项目入口文件

package.json>项目配置文件,描述项目信息和依赖

README.md>项目的说明文档

2.新增组件

在 \src\components 目录新建 vue 文件(每一个.vue文件都是一个单独vue组件,用来实现页面特定的功能界面,包括基本的骨架html+CSS+js)。例如 Hellovue.vue,vue文件代码标准模板样式如下:

<template>
    <div id="...">
      组件html模板
    </div>
    </template>

    <style>
      css相关样式
    </style>

    <script>
    export default { //默认向外暴露一个对象
      name:'Hellovue',
      data () {
        return {};// data保存数据必须返回一个对象
      }
    };
    </script>

1.引入组件

1.在App.vue主文件中script标签添加import Hellovue form ./components/Hellovue.vue导入子组件。

2.组件模板对象添加components属性。

3.重启项目即可看到自己定义的组件。

4.新增页面(利用vue路由实现)在 \router\index.js 添加新增页面路由

import Hellovue from '@/components/Hellovue'
...
  {
   path: '/Hellovue',
   name: 'Hellovue',
   component: Hellovue
  }

在App.vue主页面挂载<router-link to='Hellovue'>跳转我的页面</router-link>即可

1.打包编译

终端运行命令编译

npm run build

即可产品dist文件,项目上线后只需把dist文件丢到服务器即可。ps:如果本地测试,则需修改webpack生产环境下的assetsPublicPath配置

注意事项:

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中提供一个全局变量:$

总结

以上所述是小编给大家介绍的从零到一详聊创建Vue工程及遇到的常见问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
js+html获取系统当前时间
Nov 10 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 #Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 #Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 #Javascript
You might like
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
php中explode函数用法分析
2014/11/15 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Why we need EJB
2016/10/20 面试题
学生档案自我鉴定
2013/10/07 职场文书
新年爱情寄语
2014/04/08 职场文书
研发工程师岗位职责
2014/04/28 职场文书
运动会演讲稿
2014/05/07 职场文书
新闻发布会策划方案
2014/06/12 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书