前言

在上个章节中我们已经将可以使前端单独跑起来的Node.js环境已经搭建起来了。

所以我们今天就可以用这个Node.js来试试水，
不过之前我们用的是别人的项目，今天我们就要用vue-cli 来搭建一个属于我们自己的一个项目，并且能够跑起来。

并且在一个新项目中把ElementUI也导入进去。

vue-cli搭建(手脚架)

vue-cli的搭建是为了创建一个SPA项目的一个基本结构.

比如说：注意!!! 这是我搭建完成好的node_global里面的文件，如果没搭建的话，可以去看看是没有这些文件的。

所以在搭建完毕后才会出现这些文件。

搭建vue-cli

搭建比较简单

直接打开cmd;

然后输入：npm install -g vue-cli

等待下载就行完毕就行了。

测试是否搭建成功

输入:vue -V

如果出现版本号就算成功

使用vue-cli构建项目

在自己要搭建项目的地方：按住 shift + 点击右键 ；

必须是在某个文件夹下，打开窗口。
然后输入：vue init webpack 项目名

就会出现一系列的问答，所以可以参考下面的解答。

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

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

Project initialization finished!

========================

结果就算是项目搭建成功,

最重要的是，最好可以测试一下：shift+点击，输入：npm run dev

停止项目
Ctrl + c 会弹出一个询问，然后输入 y 就行

ElementUI的导入

这个是要在项目内部才能导入哦。

必须在项目内部操作

然后输入：npm install element-ui -S

等待下载完毕就行，

然后在测试一下，看是不是会下载不完全而导致包缺损。

如果下载失败，就将node_modules删掉，重新运行 npm install element-ui -S

等到下载完毕后就算项目彻底搭建完毕了。

接下来我们就以自己的项目完成一个简单的测试

项目测试

在HBuilderX中将我们的项目导入进来就行。

其中我们写的代码主要在于src中

虽然其他的也挺重要的，但不是今天的主题，以后也会涉及到的。

src文件夹源码目录(开发中用得最多的文件夹)

assets 共用的样式、图片

components
业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

router 设置路由

App.vue vue文件入口界面

main.js
对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

只不过相对于传统的结构，我更倾向于将components当做一个公共的vue放置
而新建一个views作为自己的一个逻辑vue

组件 views中

About.vue

<template><div class="hello">关于博主个人事迹</div></template><script>export default {data() {return {};}}
</script><style scoped></style>

第二个文件

UserInfo.vue

<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><style scoped></style>

路由设置

在 rotuer中的index.js里

import Vue from 'vue'
import Router from 'vue-router'
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}]}]
})

设置轴点和视图。

因为其中的app组件是其项目结构中最为大的一个组件，所以所有的其他组件都放置在这里面。

App.vue

<template><div id="app"><!-- <img src="./assets/logo.png"> --><router-link to="/About">博客个人信息</router-link><router-link to="/UserInfo">用户个人信息</router-link><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>

然后run起来，

总结

构建项目比不难，难在于理解项目的结构，(￣ェ￣;)嘛，并且能够清楚知道哪些文件是干嘛的。

比如说，本章的
后缀带.vue的就是各个组件
后缀带.js 的就是一些实列。
main.js 就是实列一个vue 来挂载。
index.js 就是实列一个路由来集合。

Thanks♪(･ω･)ﾉ希望对大家有所帮助

【SPA项目的搭建】相关推荐

SPA项目搭建及嵌套路由
目录上期与大家分享了什么是SPA(单页Web应用),今天来给大家分享如何使用vue-cli搭建一个SPA项目. 一.SPA项目搭建 1. 什么是vue-cli? 2.安装vue-cli 3.使用vu ...
使用vue-cli搭建SPA项目
哈喽各位本次小無分享使用vue-cli搭建SPA项目先看本次目录吧目录一.如何使用vue-cli搭建SPA项目 1.什么是Vue-cli vue-cli是vue.js的脚手架,用于自动生成vue ...
vue之使用vue-cli搭建SPA项目
目标 1.如何使用vue-cli搭建SPA项目步骤一:使用脚手架创建项目骨架步骤二:运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块步骤三:启动并访问项目步骤 ...
使用Vue_cli搭建SPA项目
目录一.如何使用Vue_cli搭建SPA项目二.如何在SPA项目中使用路由三.嵌套路由的使用一.如何使用Vue_cli搭建SPA项目 1.Vue_cli的定义: ...
使用 Vue-cli 搭建SPA项目
使用 Vue-cli 搭建SPA项目使用 Vue-cli 搭建SPA项目安装vue-cli 构建项目 package.json Vue项目结构案例使用 Vue-cli 搭建SPA项目使用 V ...
Vue-cli搭建SPA项目
Vue-cli搭建SPA项目前言 vue-cli简介安装vue-cli 使用脚手架vue-cli(2.X版)来构建项目如何去更改调试地址的端口号使用vue+elementUI创建SPA项目 V ...
使用vue-cli来搭建SPA项目
使用vue-cli来搭建SPA项目 0. 前提:搭建好NodeJS环境 1. 什么是vue-cli? 2. 安装vue-cli 3. 使用脚手架vue-cli(2.X版)来构建项目 0. 前提:搭建好 ...
超详细使用vue-cli搭建SPA项目
目录一.SPA项目的构建构建前提利用Vue-cli来构建spa项目 1. 什么是Vue-cli 2. 安装vue-cli(记得电脑联网) 3. 使用脚手架vue-cli(2.X版)来构建项目二 ...
搭建SPA项目SPA项目中使用路由嵌套路由
目录一.vue-cli建立SPA项目 1.1 安装vue-cli 1.2 命令构建SPA项目 1.3 导入编码器 1.4 SPA项目运行访问过程二.SPA项目使用路由 2.1 定义组件 2.2 定 ...

【SPA项目的搭建】

目录

前言