使用vue-cli创建一个spa项目
使用vue-cli创建一个spa项目
使用vue-cli创建一个spa项目1.前提2. 利用Vue-cli来构建spa项目1.什么是Vue-cli2.安装vue-cli 3. 使用脚手架vue-cli来构建项目1.cmd窗口执行2.切换路径到这个spa项目 4.项目结构说明1.build 文件夹1.webpack.base.conf.js2.webpack.dev.conf.js3.webpack.prod.conf.js4. build.js5.vue-loader.conf.js 2.config文件夹1.dev.env.js2.prod.env.js3.index.js 3.node_modules文件夹4.src文件夹1.assets2. components3.router4.App.vue5.main.js 5.static文件夹6.package.json 5.什么是.vue文件6.使用路由7.使用嵌套路由spa----单页Web应用（single page application，SPA）
1.前提
nodeJS环境已经搭建完毕
node -vnpm -v
2. 利用Vue-cli来构建spa项目
1.什么是Vue-cli
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：
vue init webpack xxx
注1：xxx 为自己创建项目的名称
注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境
2.安装vue-cli
npm install -g vue-cli # -g表示全局安装npm install webpack -g
没有报错则表示安装成功
# cmd窗口执行,注意此处的V是大写的vue -V
3. 使用脚手架vue-cli来构建项目
1.cmd窗口执行
vue init webpack xxx #此处的xxx指的是项目名
1.Project name：项目名，默认是输入时的那个名称spa2.Project description：项目描述3.Author：作者4.Vue build：选择题4.1 Runtime + Compiler: recommended for most users//运行加编译，官方推荐4.2 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files //仅运行时5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N 新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法7.Set up unit tests：是否安装单元测试 N8.Setup e2e tests with Nightwatch?：是否安装e2e测试 N9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)> Yes, use NPMYes, use YarnNo, I will handle that myself//选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖
显示如下内容表示创建成功
2.切换路径到这个spa项目
cd spanpm install # 安装项目所需要的npm模块npm run dev # 运行项目
出现以下页面表示运行成功
4.项目结构说明
1.build 文件夹
这个文件夹主要是进行webpack的一些配置
1.webpack.base.conf.js
webpack基础配置,开发环境,生产环境都依赖
2.webpack.dev.conf.js
webpack开发环境配置
3.webpack.prod.conf.js
webpack生产环境配置
4. build.js
生产环境构建脚本
5.vue-loader.conf.js
此文件是处理.vue文件的配置文件
2.config文件夹
这个文件夹主要是进行webpack的一些配置
1.dev.env.js
配置开发环境
2.prod.env.js
配置生产环境
3.index.js
这个文件进行配置代理服务器，例如：端口号的修改
3.node_modules文件夹
存放npm install时根据package.json配置生成的npm安装包的文件夹
4.src文件夹
源码目录(开发中用得最多的文件夹)
1.assets
共用的样式、图片
2. components
业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
3.router
设置路由
4.App.vue
vue文件入口界面
5.main.js
对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
5.static文件夹
存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置, 对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用
6.package.json
这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包
5.什么是.vue文件
.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。 每个.vue文件包含三种类型的顶级语言块 ,
这三个部分分别代表了 html,js,css。
**注1：**不能直接把html代码包裹在中，而是必须在里面方置一个html标签来包裹所有的代码。
一般情况是使用
标签包含其它的代码(保证只有一个根元素)
<template><div>...</div></template>
**注2：**js代码写在
<script>export default {name: 'App'}</script>
**注3：**样式与以前的写法一样
6.使用路由
将前一部分内容重新写一遍
博客链接: /qq_50477101/article/details/131838689
效果
1.在components中添加Home.vue文件,编写内容
<template><div>这是首页,展示网站的最新的内容</div></template><script>export default{name: 'Home',data(){return {}}}</script><style></style>
2.在components中添加About.vue文件,编写内容
<template><div>这是一个关于的页面</div></template><script>export default{name: 'About',data(){return {}}}</script><style></style>
3.在router/index.js中写入以下内容
import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import About from '@/components/About'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/home',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]})
7.使用嵌套路由
效果
修改About.vue文件
<template><div><router-link to="/aboutMe">关于站长</router-link><router-link to="/aboutWebsite">关于网站</router-link><router-view></router-view></div></template><script>export default{name: 'About',data(){return {}}}</script><style></style>
添加AboutMe.vue文件
<template><div>关于本站创始人,xxxxxxxxx,xxxxx</div></template><script>export default {name: "AboutMe"}</script><style scoped></style>
添加AboutWebsite.vue文件
<template><div>本站致力于xxx,目前发展了xxx,将要发展xxx</div></template><script>export default {name: "AboutWebsite"}</script><style scoped></style>
修改router/index.js文件
import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import About from '@/components/About'import AboutMe from '@/components/AboutMe'import AboutWebsite from '@/components/AboutWebsite'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/home',name: 'Home',component: Home},{path: '/about',name: 'About',component: About,children:[{path: '/aboutMe',name: 'AboutMe',component: AboutMe},{path: '/aboutWebsite',name: 'AboutWebsite',component: AboutWebsite},]}]})
