创建Vue项目前准备
验证安装是否成功
1、安装node.js和npm
按键win+r,输入cmd打开命令行工具
出现以上版本显示,代表安装成功
2、安装webpack
安装webpack,按键wind+r再输入cmd点击enter键 打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。
在此目录下有生成webpack.cmd文件代表安装成功
安装vue-cli脚手架构建工具
必须先安装vue,vue-cli,webpack,node等一些必要的环境
安装vue-cli脚手架构建工具,打开命令窗口工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功
注1:安装成功后,会出现如下文件
d:\tools ==> 根据自行安装的目录来操作
node-v10.15.3-win-x64
node_global
vue
vue.cmd
vue-init
vue-init.cmd
vue-list
vue-list.cmd
创建项目
使用脚手架vue-cli(2.X版)来构建项目
步骤
- 打开命令窗口
- 切换到d盘,进入d:\temp目录 shift+insert快速赋值()
- 此命令用于创建SPA项目,它会在当前目录生成一个以“spa1”命名的文件夹,pa1即为项目名,项目名不能用中文或大写字母,然后终端会出现“一问一答”模式(见注2)
注意事项:
注1:cmd命令行窗口显示中文乱码,多是因为cmd命令行窗口字符编码不匹配导致
修改cmd窗口字符编码为UTF-8,命令行中执行:chcp 65001
切换回中文:chcp 936
这两条命令只在当前窗口生效,重启后恢复之前的编码。
注2:“一问一答”模式
Project name:项目名,默认是输入时的那个名称spa1,直接回车
Project description:项目描述,直接回车
Author:作者,随便填或直接回车
4Vue build:选择题,一般选第一个
4.1Runtime + Compiler: recommended for most users//运行加编译,官方推荐,就选它了
4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files
- render functions are required elsewhere//仅运行时,已经有推荐了就选择第一个了
5.Install vue-router:是否需要vue-router,Y选择使用,这样生成好的项目就会有相关的路由配置文件
6.Use ESLint to lint your code:是否用ESLint来限制你的代码错误和风格。N 新手就不用了,但实际项目中一般都会使用,这样多人开发也能达到一致的语法
7.Set up unit tests:是否安装单元测试 N
8.Setup e2e tests with Nightwatch?:是否安装e2e测试 N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself //选择题:选第一项“Yes, use NPM”是否使用npm install安装依赖全部选择好回车就进行了生成项目,出现如下内容表示项目创建完成
# Project initialization finished!
注3:如创建项目没有下载依赖,就输入下面命令,进下载所需的依赖
npm install #安装所有项目需要的npm模块
代表创建成功
步骤三:启动并访问项目
首先得切换到项目存放的目录中,就上图目录中,然后输入命令npm run dev启动项目
启动成功,默认端口号为8080
注意事项:
- 项目启动成功后,打开浏览器输入“http://localhost:8080”即可
- vue-cli构建的项目,在控制台npm run dev启动后,默认的调试地址是8080端口的但是大部分时候,我们都要并行几个项目开发,很有可能已经占用了8080端口,所以就涉及到如何去更改调试地址的端口号了
config --> index.js
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
host: 'localhost',
port: 8080, // 端口号自己修改
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
},
步骤四:添加element-ui模块
执行此命令
npm install element-ui -S #-S就是-save的缩写
如显示不是内部或外部指令,就重新打开命令窗口(进入到项目的目录中)再次执行此命令
注:使用vue+elementUI创建SPA项目,一般情况下其项目结构组成如下:
- Vue + ESLint + webpack + elementUI + ES6
- Vue: 主要框架
- ESLint: 帮助我们检查Javascript编程时的语法错误,这样在一个项目中多人开发,能达到一致的语法
- Webpack: 设置代理、插件和loader处理各种文件和相关功能、打包等功能。整个项目中核心配置
- elementUI: 是基于vue的一套样式框架,里面有很多封装好的组件样式
- ES6: 全称ECMAScript6.0,是JavaScript的下一个版本标准,2015.06发版
npm install多种命令
- npm install
下载“package.json”中dependencies和devdependencies中配置的所有依赖模块,并保存到项目的node_modules目录
注1:在git clone项目的时候,项目文件中并没有node_modules文件夹,为什么呢?
- npm install xxx -g -g==global
全局安装,下载依赖模块,并保存到%node_home%\node_global\node_modules目录下
- npm install xxx -S
写入到package.json的dependencies对象,并保存到项目的node_modules目录
- npm install xxx -D
写入到package.json的devDependencies对象,并保存到项目的node_modules目录
注意
- 在git clone项目的时候,项目文件中并没有node_modules文件夹,为什么呢?
- 我们知道这个文件中(project_home\node_modules)保存的是我们项目开发中所使用的依赖模块。这个文件夹可能有几百兆大小,如果放到github上,其它人clone的时候会非常慢,这个时候就想到用一个package.json依赖配置文件解决这个问题。这样每个人下载这个项目的时候,只需要进入该项目目录直接npm install npm就会到里面去找需要的函数库,也就是依赖。
- 缩写命令的全称,注意大小写、-S,-D都是大写
i/install
-S/--save
-D/--save-dev
-g/--global
- package.json文件里面的devDependencies和dependencies对象有什么区别呢?
- devDependencies里面的插件只用于开发环境,不用于生产环境,而dependencies是需要发布到生产环境的。例如:gulp ,babel,webpack一般都是辅助工具,应该使用--save-dev安装到开发环境例如:vue ,react,应该使用--save 安装到生产环境
项目介绍
项目架构
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹,一般放一些静态资源文件
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹
├── index.html # index.html 入口模板文件
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的,可参照github上star多的项目。
build/
package.json详解
{
"name": "spa1", //项目名称:1.name中不能包含大写字母name;2.不能以"."(点)或者"_"(下划线)开头
"version": "1.0.0", //项目版本
"description": "A Vue.js project", //项目描述
"author": "", //作者
"private": true, //如果你不希望授权别人以任何形式使用私有包或未发布的包,设为true这个包将不会发布到NPM平台下
"scripts": { //指定了运行脚本命令的npm命令行缩写,比如push指定了运行npm run dev时,所要执行的命令
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": { //指定依赖的其它包,这些依赖是指包发布后正常执行时所需要的,也就是线上需要的包。它们将会被安装在node_module目录下
"element-ui": "^2.9.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": { //开发环境依赖包列表。这些依赖只有在开发时候才需要,它们将会被安装在node_module目录下
//NPM使用语义版本号来管理代码,语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号
//当代码变更时,版本号按以下原则更新。
// 1.如果只是修复bug,需要更新Z位。
// 2.如果是新增了功能,但是向下兼容,需要更新Y位。
// 3.如果有大变动,向下不兼容,需要更新X位
//version,必须匹配某个版本,如:1.1.2,表示必须依赖1.1.2版
//>version,必须大于某个版本,如:>1.1.2,表示必须大于1.1.2版
//~version,大概匹配某个版本,~1.1.2,表示>=1.1.2 <1.2.0
//^version,兼容某个版本,如:^1.1.2 ,表示>=1.1.2 <2.0.0
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": { //指定包运行的环境 jdk1.8+tomcat8.5
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
//根据提供的目标浏览器的环境来,智能添加css前缀,js的polyfill垫片,来兼容旧版本浏览器
//last 2 versions:CanIUse.com追踪的IE最新版本为11,向后兼容两个版本即为10、11
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
*.vue文件
*.vue 文件,是一个自定义的文件类型,用类似HTML的语法描述一个Vue组件。
每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。
这三个部分分别代表了 html,js,css。
- 注1:不能直接把html代码包裹在<template></template>中,而是必须在里面方置一个html标签来包裹所有的代码。
一般情况是使用<div></div>标签包含其它的代码(保证只有一个根元素)
<template> <div>...</div> </template>
- 注2:js代码写在<script>标签中,并通过export导出
<script> export default { name: 'App' } </script>
- 注3:样式与以前的写法一样
项目执行流程
项目的运行入口index.html(main. js是程序逻辑入口文件,index. html是首页入口文件)
为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js,以及他们之间的关系是如何联系起来的呢,这块的配置文件位于build文件夹下,包括webpack.dev.conf.js等,感兴趣的可以了解下。通过项目的配置文件,可以加载运行我们的index.html文件以及自动关联vue相关的模块。
首先我们来看一下index.html中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>y</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
在body体中只有一个div标签,其id为app,这个id将会连接到src/main.js内容,接着我们看一下main.js中的主要的代码
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在main.js中,新建了一个vue实例,并使用el:#app链接到index.html中的app,并使用template引入组件<app>和路由相关的内容(具体的涉及到vue的语法规则,如果不理解的先记下来吧,继续往后看,等了解vue的相关内容后,可能会更清晰)。也就是说通过main.js我们关联到App.vue组件,接着,我们继续看一下App.vue组件中的内容。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
看一下App.vue中的内容,是一个标准的App.vue模板的形式,包含了<template></template>、<script></script>、<style></style>三部分,从template标签中可以看到,使用img标签加载了vue的图像,也就是我们使用npm run dev运行vue项目后看到的图像,那么图像下面的内容是从哪里渲染出来的呢?
我们注意到,<template>标签下,除了<img>标签外,还有<router-view>标签,<router-view>标签将会把路由相关内容渲染在这个地方,接下来,我们看一下路由的内容有哪些,在哪里出现的。其实,这个文件位于src/router/index.js中,我们看一下index.js中的代码
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
在index.js的代码中,建立了路由相关的内容,也就会渲染到app.vue下面的<router-view>中。在index.js中,将helloworld组件发布为路由,换句说,index.js在这里就是将helloword发布为路由,以在图片下面进行展示helloword内容,接下来我们再看看components/helloword中的内容是啥(由于里面的内容比较多,这里我们只截取了template中的内容)。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
在helloworld.vue的template中,我们可以看到界面上渲染的一些连接等内容。到此,这个页面的加载渲染过程结束了。
总结:通过上述过程,我们可以看到项目加载的过程是index.tml->main.js->app.vue->index.js->helloworld.vue。这里只是对我们运行项目后,如何出现首页面做了简单的解释,对具体的实现没有进行分析。
路由嵌套案例
创建组件
About.vue
<template>
<div>
<h1>关于我们</h1>
</div>
</template>
<script>
export default{
name:'About',
data:function(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>
Home.vue
<template>
<div>
<h1>{{ts}}-----{{msg}}</h1>
<div>
</div>
<router-link to="/About">关于我们</router-link>
<router-link to="/UserInfo">用户中心</router-link>
<div>
<router-view/>
</div>
</div>
</template>
<script>
export default{
name:'Home',
data:function(){
return{
ts:new Date().getTime(),
msg:'Hellow Vue!!!!'
}
},
methods:{
}
}
</script>
<style>
</style>
Logout.vue
<template>
<div>
<h1>注销</h1>
</div>
</template>
<script>
export default{
name:'Logout',
data:function(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>
Revise.vue
<template>
<div>
<h1>用户修改</h1>
</div>
</template>
<script>
export default{
name:'Revise',
data:function(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>
UserInfo.vue
<template>
<div>
<h1>用户中心</h1>
<div>
<router-link to="/Logout">注销</router-link>
<router-link to="/Revise">修改</router-link>
</div>
<div>
<router-view/>
</div>
</div>
</template>
<script>
export default{
name:'UserInfo',
data:function(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>
引入路由
import About from '@/components/About'
import UserInfo from '@/components/UserInfo'
import Logout from '@/components/Logout'
import Revise from '@/components/Revise'
配置路由
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/',
name: 'Home',
component: Home,
children:[
{
path:'UserInfo',
name:'UserInfo',
component: UserInfo,
children:[
{
path:'/Logout',
name:'Logout',
component: Logout,
},{
path:'/Revise',
name:'Revise',
component: Revise,
}
]
},{
path: 'About',
name: 'About',
component: About,
}
]
}
]
})
至此,Vue脚手架框架搭建项目介绍完毕,由于作者水平有限难免有疏漏,欢迎留言纠错。