vue-cli2.9.3 详细教程


Posted in Javascript onApril 23, 2018

一、安装vue-cli

1.使用npm全局安装vue-cli(前提是你已经安装了nodejs,否则你连npm都用不了),命令如下:

npm install vue-cli -g

2.可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。如果vue -V的命令能显示版本号,说明已经顺利的把vue-cli安装到我们的计算机里了。

vue-cli2.9.3 详细教程

3.同时在C:\Users\xxx\AppData\Roaming\npm目录下为会生成几个文件:

vue-cli2.9.3 详细教程

二、初始化项目

1.用vue init命令来初始化项目:

vue init <template-name> <project-name>

<template-name>:表示模板名称,vue-cli官方为我们提供了5种模板:
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。

<project-name>:表示项目名称,这个你可以根据自己的项目来起名字。

2.在实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令:

vue init webpack vuecli_demo

输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写
Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
Author:作者,如果你有配置git的作者,他会读取。
Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。

vue-cli2.9.3 详细教程 

等待一段时间后,安装成功显示如下:

vue-cli2.9.3 详细教程 

3.进入项目目录 cd vuecli_demo

目录结构如下

vue-cli2.9.3 详细教程 

4.npm run dev(或npm start) 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。

vue-cli2.9.3 详细教程 

5.如果想要执行完npm run dev(或npm start) 后能自动打开网页,则需要进行如下设置:

vue-cli2.9.3 详细教程

三、Vue-cli项目结构讲解

由于版本实时更新和你选择安装的不同(这里列出的是模板为webpack的目录结构),所以你看到的有可能和下边的有所差别。

以下项目结构是vue-cli@2.9.3版本

|-- build       // 项目构建(webpack)相关代码
| |-- build.js      // 生产环境构建代码
| |-- check-version.js    // 检查node、npm等版本
| |-- logo.png      // logo图片
| |-- utils.js      // 构建工具相关
| |-- vue-loader.conf.js    // vue-loader配置
| |-- webpack.base.conf.js   // webpack基础配置
| |-- webpack.dev.conf.js    // webpack开发环境配置
| |-- webpack.prod.conf.js   // webpack生产环境配置
|-- config       // 项目开发环境配置
| |-- dev.env.js      // 开发环境配置
| |-- index.js      // 项目主要配置(包括监听端口,打包路径等)
| |-- prod.env.js      // 生产环境配置
|-- src        // 源码目录
| |-- assets       // 静态资源 
| |-- components      // vue公共组件
| |-- router       // vue路由
| |-- App.vue      // 页面入口文件
| |-- main.js      // 程序入口文件,加载各种公共组件
|-- static       // 静态文件,比如一些图片,json数据等
| |-- data       // 群聊分析得到的数据用于数据可视化
|-- .babelrc       // ES6语法编译配置
|-- .editorconfig     // 定义代码格式
|-- .gitignore      // git上传需要忽略的文件格式
|-- .postcssrc.js     // post-loader的插件配置文件
|-- index.html      // 入口页面
|-- package.json      // 项目基本信息
|-- package-lock.json    // 锁定当前安装的包的依赖
|-- README.md      // 项目说明

1.build——[webpack配置]

build文件主要是webpack的配置,主要启动文件是webpack.dev.conf.js,当我们输入npm run dev首先启动的就是webpack.dev.conf.js,它会去检查node及npm版本,加载配置文件,启动服务。

2.config——[vue项目配置]

config文件主要是项目相关配置,我们常用的就是当端口冲突时配置监听端口,打包输出路径及命名等

3.node_modules——[依赖包]

node_modules里面是项目依赖包,其中包括很多基础依赖,自己也可以根据需要安装其他依赖。安装方法为打开cmd,进入项目目录,输入npm install [依赖包名称],回车。

在两种情况下我们会自己去安装依赖:

(1)项目运行缺少该依赖包:例如项目加载外部css会用到的css-loader,路由跳转vue-loader等(安装方法示例:npm install css-loader)

(2)安装插件:如vux(基于WEUI的移动端组件库),vue-swiper(轮播插件)

注:有时会安装指定依赖版本,需在依赖包名称后加上版本号信息,如安装11.1.4版本的vue-loader,输入npm install vue-loader@11.1.4

4.src——[项目核心文件]

项目核心文件前面已经进行了简单的说明,接下来重点讲解main.js和router

main.js——[入口文件]
主要是引入vue框架,根组件及路由设置,并且定义vue实例,

下图中的components:{App}就是引入的根组件App.vue

后期还可以引入插件,当然首先得安装插件。

vue-cli2.9.3 详细教程

router——[路由配置]
router文件夹下,有一个index.js,即为路由配置文件

这里定义了路径为'/'的路由,该路由对应的页面是Hello组件,所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件

类似的,我们可以设置多个路由,‘/index','/list'之类的,当然首先得引入该组件,再为该组件设置路由。

vue-cli2.9.3 详细教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
javascript的理解及经典案例分析
May 20 Javascript
vue组件学习教程
Sep 09 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue.js数据绑定操作详解
Apr 23 #Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
再谈Angular4 脏值检测(性能优化)
Apr 23 #Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 #Javascript
vue.js中实现登录控制的方法示例
Apr 23 #Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 #Javascript
Vue前端开发规范整理(推荐)
Apr 23 #Javascript
You might like
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php去除重复字的实现代码
2011/09/16 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python中的__slots__示例详解
2017/07/06 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
会计专业个人求职信范文
2014/01/08 职场文书
业务部主管岗位职责
2014/01/29 职场文书
文秘应届生求职信
2014/07/05 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
百家讲坛观后感
2015/06/12 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL