从零到一详聊创建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 相关文章推荐
jQuery 使用手册(五)
Sep 23 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
浅谈document.write()输出样式
May 07 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 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
晶体管来复再生式二管收音机
2021/03/02 无线电
php的access操作类
2008/04/09 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery中的编程范式详解
2014/12/15 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Python封装shell命令实例分析
2015/05/05 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
策划主管的工作职责
2013/11/24 职场文书
集体备课反思
2014/02/12 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
学籍证明模板
2014/11/21 职场文书
2014年党总支工作总结
2014/12/18 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书