Vue-cli:

什么是vue-cli?

vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:
vue init webpack xxx

注1:xxx 为自己创建项目的名称
注2:必须先安装vue,vue-cli,webpack,node等一些必要的环境

安装vue-cli

打开cmd

在node-v10.15.3-win-x64\node_global下执行以下命令:
npm install -g vue-cli
npm install -g webpack

安装成功后会出现以下文件:

vue
vue.cmd
vue-init
vue-init.cmd
vue-list
vue-list.cmd

查看是否安装成功:

vue -V(注意这里是大写的“V”)

使用脚手架vue-cli(2.X版)来构建项目

cmd:

切换目录:

vue init webpack spa1 (项目名)

注1:cmd命令行窗口显示中文乱码,多是因为cmd命令行窗口字符编码不匹配导致
修改cmd窗口字符编码为UTF-8,命令行中执行:chcp 65001
切换回中文:chcp 936
这两条命令只在当前窗口生效,重启后恢复之前的编码。

注2:“一问一答”模式
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!

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

cd   spa1 #改变路径到spa1文件夹下
npm install   #安装所有项目需要的npm模块

:启动并访问项目

npm run dev

使用HBuilderX打开项目

在config目录下的index.js修改端口号防止端口冲突

原端口号:port: 8080

停止项目添加element-ui模块

cd spa1
npm install element-ui -S

package.json详解
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,
以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,
自动下载所需的模块,也就是配置项目所需的运行和开发环境
详情见资料“package-详解.json”中的相关注释

npm install/npm install xxx -S/npm install xxx -D/npm install xxx -g的区别

npm install
下载“package.json”中dependencies和devdependencies中配置的所有依赖模块,并保存到项目的node_modules目录

注1:在git clone项目的时候,项目文件中并没有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目录

vue项目结构说明

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中,
分别对应全局下载和局部下载的依赖包

vue 文件

vue 文件,是一个自定义的文件类型,用类似HTML的语法描述一个Vue组件。
每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。
这三个部分分别代表了 html,js,css。

嵌套路由:

核心代码:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutLingerqi from '@/components/AboutLingerqi'
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: '/AboutLingerqi',
name: 'AboutLingerqi',
component: AboutLingerqi
},
{
path: '/AboutWebSite',
name: 'AboutWebSite',
component: AboutWebSite
}
]
} ]
})

 

  

效果演示:

SPA项目搭建及嵌套路由的更多相关文章

  1. 使用vue-cli搭建spa项目

    1. 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xxx 为自己创 ...

  2. SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制?

    SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制? 可以这样做: 登陆之前,所有页面跳到 登陆页面:包括随便输入的路由地址. 登陆后,跳到相应页面:随便输入的.不存在的路由地址,才跳到 ...

  3. 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

    前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...

  4. 初入angular4——实际项目搭建总结

    前言 接到一个pc端后台项目,还会加入两个安卓同事一起学习和做这个项目,需要带一下他们. 既ng1之后,我就没怎么有过其它后台框架的实际项目经验了,期间用的移动端框架也并非vue.angular系列. ...

  5. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  6. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  7. 《VueRouter爬坑第三篇》-嵌套路由

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  8. VueRouter爬坑第三篇-嵌套路由

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  9. Day04_乐优商城项目搭建

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 0.学习 ...

随机推荐

  1. C语言中的顺序点

    C语言盲点1.函数参数的求值顺序依赖于编译器,例如f(a,a++);是先求a++还是求a不一定 2.C语言中的大多数运算符对其操作数的求值顺序也依赖于编译器 警告int i = f() * g();这 ...

  2. css多余文本使用....代替

    1. 只显示单行文本,多余文本使用...代替 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2. 显示多行文本,多余文 ...

  3. Spring Boot 配置文件中的花样,看这一篇足矣!

    在快速入门一节中,我们轻松的实现了一个简单的RESTful API应用,体验了一下Spring Boot给我们带来的诸多优点,我们用非常少的代码量就成功的实现了一个Web应用,这是传统的Spring应 ...

  4. for循环使用element的折叠面板遇到的问题-1

    首先,效果是点击添加折叠面板,折叠面板的title右侧是关闭的小按钮,每次添加的面板都自动展开,其他的面板自动关闭,但其中发现一个问题是,每次点击关闭的时候,虽然上一个面板被关闭了,但他的下一个会自动 ...

  5. apache部分报错解决方法

    AH00558: 进入apache文件夹下的conf文件夹,打开httpd.conf文件,用ctrl+F找到ServerName,如下图 在下面加上一句: ServerName domain_name ...

  6. Mac进行Flutter的相关开发配置

    参考链接:https://www.cnblogs.com/tangtianming/p/10797227.html

  7. USB免驱RFID读写器编程解析之一:智能卡篇

    随着RFID应用的普及,越来越多的软件工程师需要使用RFID读写器编程来实现自己的需求.为了使软件工程师更快的了解RFID读写器的使 用,本文选择一款市面上常用的USB免驱RFID读写器SDT-HA来 ...

  8. spark利用yarn提交任务报:YARN application has exited unexpectedly with state UNDEFINED

    spark用yarn提交任务会报ERROR cluster.YarnClientSchedulerBackend: YARN application has exited unexpectedly w ...

  9. Linux系统学习 二、测评-身份鉴别1

    身份鉴别 1)对登陆操作系统和数据库系统的用户进行身份表示和鉴别 1.密码文件中的口令字段是否不为空 2.检查各个用户主目录下的.rhosts文件 3.查看/etc/hosts.equiv 学习: 1 ...

  10. Mac下编译libpomelo静态库,并在cocos2dx项目中引用

    最近在学习cocos2dx的过程中需要和服务器进行交互,所以这几天在学习libpomelo静态库的编译和使用.之前在windows系统下编译libpomelo,并在VS中引入比较顺利:但是,目前对Ma ...