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 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 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
实用函数2
2007/11/08 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
django中ImageField的使用详解
2020/12/21 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
医院门卫岗位职责
2013/12/30 职场文书
电钳工人个人求职信
2014/05/10 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
ant design charts 获取后端接口数据展示
2022/05/25 Javascript