使用vue-cli搭建SPA项目

使用vue-cli搭建SPA项目

安装VUE-CLI

在控制台写出以下代码

npm install -g vue-cli

 注 1 ：安装成功后，会出现如下文件
    d：\ initPath

         节点v10.15.3共赢 - 64

           node_global

             VUE

             vue.cmd

             VUE-INIT

             VUE-init.cmd

             VUE列表

             VUE-list.cmd
注 2 ：安装完成之后打开命令窗口并输入vue -V （注意这里是大写的“V” ），如果出现相应的版本号，则说明安装成功。

使用脚手架VUE-CLI（2.X 版）来构建项目

vue init webpack spa1

此命令用于创建SPA 项目，它会在当前目录生成一个以“spa1” 命名的文件夹
SPA1 即为项目名，项目名不能用中文或大写字母，然后终端会出现“ 一问一答” 模式

“一问一答”模式

     1.Project name：项目名，默认是输入时的那个名称spa1，直接回车

     2.Project description：项目描述，直接回车

     3.Author：作者，随便填或直接回车

     4.Vue 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安装依赖

        全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成

运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块

此步骤可理解成：maven的web项目创建成功后，修改pom文件添加依赖

cd spa1 改变路径到spa1文件夹下

npm install 安装所有项目需要的npm模块

npm run dev
注 1 ：项目启动成功后，打开浏览器输入“http：// localhost：8080” 即可
注 2 ：vue-cli 构建的项目，在控制台npm run dev 启动后，默认的调试地址是8080 端口的但是大部分时候，我们都要并行几个项目开发，很有可能已经占用了 8080 端口，所以就涉及到如何去更改调试地址的端口号了

    config - > index.js  

    dev：{

      //路径

      assetsSubDirectory：'static'，

      assetsPublicPath：'/'，

      proxyTable：{}，

      主持人：'localhost'，

      港口：8083，// 在这里修改端口号

      autoOpenBrowser：false，

      errorOverlay：true，

      notifyOnErrors：是的，

    }，

停止项目添加元素的UI 模块

cd spa1

npm install element-ui -S -S 就是-save 的缩写

   注 1 ：使用vue + elementUI 创建SPA 项目，一般情况下其项目结构组成如下：

    Vue + ESLint + webpack + elementUI + ES6

    Vue公司：主要框架

    ESLint：帮助我们检查的Javascript 编程时的语法错误，这样在一个项目中多人开发，能达到一致的语法

    的WebPack：设置代理，插件和装载机。处理各种文件和相关功能，打包等功能整个项目中核心配置

    ElementUI的：是基于VUE 的一套样式框架，里面有很多封装好的组件样式

    ES6：全称ECMAScript6.0 ，是JavaScript 的下一个版本标准，2015.06 发版  

npm 删除模块

[npm uninstall xxx] 删除xxx 模块;

[npm uninstall -g xxx] 删除全局模块xxx ;

demo

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/views/About'
import UserInfo from '@/views/UserInfo'
import UserDetail from '@/views/UserDetail'
import UserPwd from '@/views/UserPwd'

Vue.use(Router)

export default new Router({
	routes: [{
			path: '/',
			name: 'About',
			component: About
		},
		{
			path: '/About',
			name: 'About',
			component: About
		},
		{
			path: '/UserInfo',
			name: 'UserInfo',
			component: UserInfo,
			children: [{
					path: '/UserDetail',
					name: 'UserDetail',
					component: UserDetail
				},
				{
					path: '/UserPwd',
					name: 'UserPwd',
					component: UserPwd
				}
			]
		}
	]
})

vue

<template>
	<div class="hello">
		博主个人事迹
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<template>
	<div class="hello">
		用户详细资料
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<template>
	<div class="hello">
		<router-link to="/UserDetail">个人详情</router-link>
		<router-link to="/UserPwd">修改密码</router-link>
		<router-view/>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<template>
	<div class="hello">
		用户密码修改界面
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>