目录
vue init webpack xxx
npm install -g vue-cli
vue -V
vue init webpack spa1
注1:cmd命令行窗口显示中文乱码,多是因为cmd命令行窗口字符编码不匹配导致, 修改cmd窗口字符编码为UTF-8,命令行中执行:chcp 65001, 切换回中文:chcp 936, 这两条命令只在当前窗口生效,重启后恢复之前的编码。不能管。
1)Project name:项目名,默认是输入时的那个名称spa1,直接回车 2)Project description:项目描述,直接回车 3)Author:作者,随便填或直接回车 4)Vue build:选择题,一般选第一个
5)Install vue-router:是否需要vue-router,Y选择使用,这样生成好的项目就会有相关的路由配置文件
6)Use ESLint to lint your code:是否用ESLint来限制你的代码错误和风格。N
7)Setup e2e tests with Nightwatch?:是否安装e2e测试 N
8)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
全部选择好回车就进行了生成项目,出现如下内容表示项目创建完成
#Project initialization finished!
npm install
npm run dev
npm install element-ui -S
注1:使用vue+elementUI创建SPA项目,一般情况下其项目结构组成如下: * Vue + ESLint + webpack + elementUI + ES6 Vue: 主要框架 * ESLint: 帮助我们检查Javascript编程时的语法错误,这样在一个项目中多人开发,能达到一致的语法 * Webpack: 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。整个项目中核心配置 * elementUI: 是基于vue的一套样式框架,里面有很多封装好的组件样式 * ES6: 全称ECMAScript6.0,是JavaScript的下一个版本标准,2015.06发版
命令 | 含义 |
---|---|
npm install | 下载“package.json”中dependencies和devdependencies中配置的所有依赖模块,并保存到项目的node_modules目录 |
npm install xxx -g | 全局安装,下载依赖模块,并保存到%node_home%\node_global\node_modules目录下 |
npm install xxx -S | 写入到package.json的dependencies对象,并保存到项目的node_modules目录 |
npm install xxx -D | 写入到package.json的devDependencies对象,并保存到项目的node_modules目录 |
注1:在git clone项目的时候,项目文件中并没有node_modules文件夹,为什么呢? 我们知道这个文件中(project_home\node_modules)保存的是我们项目开发中所使用的依赖模块。这个文件夹可能有几百兆大小,如果放到github上,其它人clone的时候会非常慢,这个时候就想到用一个package.json依赖配置文件解决这个问题。这样每个人下载这个项目的时候,只需要进入该项目目录直接npm install npm就会到里面去找需要的函数库,也就是依赖。
命令 | 简称 |
---|---|
install | i |
--save | -S |
--save-dev | -D |
--global | -g |
文件夹 | 文件 | 作用 |
---|---|---|
build | 这个文件夹主要是进行webpack的一些配置 | |
webpack.base.conf.js | webpack基础配置,开发环境,生产环境都依赖 | |
webpack.dev.conf.js | webpack开发环境配置 | |
webpack.prod.conf.js | webpack生产环境配置 | |
build.js | 生产环境构建脚本 | |
vue-loader.conf.js | 此文件是处理.vue文件的配置文件 | |
config文件夹 | 配置文件 | |
dev.env.js | 配置开发环境 | |
prod.env.js | 配置生产环境 | |
index.js | 这个文件进行配置代理服务器,例如:端口号的修改 | |
node_modules | 存放npm install时根据package.json配置生成的npm安装包的文件夹 | |
src文件夹 | 源码目录(开发中用得最多的文件夹) | |
assets | 共用的样式、图片 | |
components | 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件 | |
router | 设置路由 | |
App.vue | vue文件入口界面 | |
main.js | 对应App.vue创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置 | |
static文件夹 | 存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置,对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用 | |
package.json | 这个文件有两部分是有用的:scripts 里面设置命令以及在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包 |
注意: 1)不能直接将HTML代码包裹在<template></template>中,而是必须在里面放置一个html标签来包裹所有的代码,一般情况下使用<div></div>标签包含其他代码,也可以使用其他标签,只要有一个根元素即可。
<template>
<div>
...
</div>
</template>
2)js代码写在<script>标签中,并通过export导出
<script>
export default {
name: 'App'
}
</script>
const config = require('../config')
index: path.resolve(__dirname, '../dist/index.html'),
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
//在es6中一个文件可以默认为一个模块,模块通过export向外暴露接口,实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default {
name: 'Welcome',
//组件的数据对象必须是函数形式定义
//在定义data时也可以像HelloWorld中那样不带function关键字,效果是一样的
//HelloWord中为简写形式
data: function() {
return {
msg: 'Welcome to my App'
}
}
}
</script>
<!-- scoped表示定义的样式只在当前组件中有效 -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
import Welcome from '@/components/Welcome'
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/',
name: 'Welcome',
component: Welcome
}
]
})
<template>
<!--必须有一个根节点-->
<div>
<h1>关于我们</h1>
</div>
</template>
<script>
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default {
name: 'About',
//组件的数据对象必须是函数形式定义
//暂时不需要定义数据
data: function() {
return {
}
}
}
</script>
<style>
</style>
<template>
<!--必须有一个根节点-->
<div>
<h1>用户管理</h1>
</div>
</template>
<script>
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default {
name: 'UserMsg',
//组件的数据对象必须是函数形式定义
//暂时不需要定义数据
data: function() {
return {
}
}
}
</script>
<style>
</style>
3)在router/index.js中定义路由,配置路由时要注意先导入组件
import About from '@/views/About'
import UserMsg from '@/views/UserMsg'
....
{
path: '/About',
name: 'About',
component: About
},
{
path: '/UserMsg',
name: 'UserMsg',
component: UserMsg
}
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
<router-link to="/UserMsg">用户管理</router-link>
<router-link to="/About">关于我们</router-link>
</p>
<!-- 这里的配置的router-view是没有效果的,起效的时候App.vue中的
router-view,这一点通过页面效果可以看出来,在点击“用户管理”或“关于我们”
后,msg定义的提示信息没了,但vue的logo还在。
<div>
<router-view/>
</div> -->
</div>
</template>
<script>
//在es6中一个文件可以默认为一个模块,模块通过export向外暴露接口,实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default {
name: 'Welcome',
//组件的数据对象必须是函数形式定义
//在定义data时也可以像HelloWorld中那样不带function关键字,效果是一样的
//HelloWord中为简写形式
data: function() {
return {
msg: 'Welcome to my App'
}
}
}
</script>
<template>
<!--必须有一个根节点-->
<div>
<h1>用户注册</h1>
</div>
</template>
<script>
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default {
name: 'UserRegister',
//组件的数据对象必须是函数形式定义
//暂时不需要定义数据
data: function() {
return {
}
}
}
</script>
<style>
</style>
<template>
<!--必须有一个根节点-->
<div>
<h1>修改密码</h1>
</div>
</template>
<script>
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default {
name: 'UserPwdUpdate',
//组件的数据对象必须是函数形式定义
//暂时不需要定义数据
data: function() {
return {
}
}
}
</script>
<style>
</style>
import UserRegister from '@/views/UserRegister'
import UserPwdUpdate from '@/views/UserPwdUpdate'
//此处只显示了用户管理部分路由配置,为嵌套路由
{
path: '/UserMsg',
name: 'UserMsg',
component: UserMsg,
//注意children单词不要写错,如果写错程序不会报错,但效果出不来!!!!
//以"/" 开头的嵌套路径会被当作根路径,所以子路由的path不需要添加 "/" !!
children: [
{
path: 'UserRegister',
name: 'UserRegister',
component: UserRegister
},
{
path: 'UserPwdUpdate',
name: 'UserPwdUpdate',
component: UserPwdUpdate
}
]
}
<template>
<!--必须有一个根节点-->
<div>
<h1>用户管理</h1>
<p>
<router-link to="/UserMsg/UserRegister">用户注册</router-link>
<router-link to="/UserMsg/UserPwdUpdate">修改密码</router-link>
</p>
<div>
<!--
用户注册于密码修改为用户管理的子模块,所以在用户管理组件中
使用router-view用于展示用户注册与密码修改组件。如果此处不用
则点击用户注册与密码修改时没有任何效果
-->
<router-view/>
</div>
</div>
</template>
<script>
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default {
name: 'UserMsg',
//组件的数据对象必须是函数形式定义
//暂时不需要定义数据
data: function() {
return {
}
}
}
</script>