Vue-cli搭建SPA项目
Vue-cli搭建SPA项目
- 前言
- vue-cli简介
- 安装vue-cli
- 使用脚手架vue-cli(2.X版)来构建项目
- 如何去更改调试地址的端口号
- 使用vue+elementUI创建SPA项目
- Vue项目结构介绍
- *.vue文件简介
- 组件嵌套
- 总结
前言
今天分享的是Vue-cli搭建SPA项目,前提是已经搭建好Node.js环境!
如若有不懂的小伙伴,可以看看这篇博客:
Node.js环境搭建
vue-cli简介
vue-cli是vue.js的脚手架
,用于自动生成vue.js+webpack的项目模板 !
安装vue-cli
npm install -g vue-cli
此操作需要全程实时联网!
安装完成之后输入vue -V
命令测试是否安装成功!
此时可以看到已经出现了对应的版本号,说明安装成功!
注意:用来测试安装是否成功的命令中的V是大写的V
并且安装成功之后node-global文件夹中会生成以下文件:
使用脚手架vue-cli(2.X版)来构建项目
步骤一:使用脚手架创建项目骨架
此操作类似于使用eclipse创建一个maven的web项目
1、首先Windows+R输入cmd,打开cmd窗口
2、切换盘符
F:
3、 进入指定路径 此路径是用来存放创建的SPA项目的路径!
cd F:\Y1\soft\temp\project
4、执行命令,等待下载(注意需要有网络
)
vue init webpack xxx
xxx表示创建的SPA项目名,注意项目名不能有大写字母!
5、然后会出现"一问一答"模式(可能会出现乱码,但是并不影响项目的创建!)
一问一答模式 | 相关解释 |
---|---|
Project name | 项目名,默认是输入时的名称,直接回车 |
Project description | 项目描述,直接回车 |
Author | 作者,随便填 ==直接回车 == |
Vue build | 选择题,一般选第一个(运行加编译,官方推荐) |
Install vue-router | 是否需要vue-router,Y选择使用,这样生成好的项目就会有相关的路由配置文件 |
Use ESLint to lint your code | 是否用ESLint来限制你的代码错误和风格, N表示不使用 |
Set up unit tests | 是否安装单元测试 N |
Setup e2e tests with Nightwatch | 是否安装e2e测试 N |
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) | Yes, use NPM |
注意:有多个选项的,按键盘的上下键进行选择即可!
图示:
看到Project initialization finished!
说明项目创建成功!
步骤二:运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块
这类似于maven的web项目创建成功后,修改pom文件添加依赖!
1、改变路径到spa1文件夹下
cd spa1
2、安装所有项目需要的npm模块
npm install
步骤三:启动并访问项目
这类似于启动tomcat,并通过浏览器访问项目!
执行npm run dev
命令进行启动项目!
项目启动成功后,打开浏览器输入http://localhost:8080
网址即可访问项目!
vue-cli构建的项目,在控制台npm run dev启动后,默认的调试地址是8080端口!
但是很多时候我们都要并行几个项目开发,很有可能已经占用了8080端口,所以就涉及到如何去更改调试地址的端口号
如何去更改调试地址的端口号
首先打开你创建SPA项目的路径,找到config文件夹:
其次找到config文件夹下的index.js文件
选中项目-----打开方式-----记事本----修改port为8083-----保存
修改端口号之后记得重新启动项目!
再次访问后的页面:
步骤四:停止项目添加element-ui模块
npm install element-ui -S
-S就是-save的缩写
使用vue+elementUI创建SPA项目
一般情况下其项目结构组成如下:
Vue + ESLint + webpack + elementUI + ES6
Vue: 主要框架
ESLint: 帮助我们检查Javascript编程时的语法错误,这样在一个项目中多人开发,能达到一致的语法
Webpack: 设置代理、插件和loader处理各种文件和相关功能、打包等功能。整个项目中核心配置
elementUI: 是基于vue的一套样式框架,里面有很多封装好的组件样式
ES6: 全称ECMAScript6.0,是JavaScript的下一个版本标准,2015.06发版
package.json简介
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(名称、版本、许可证等元数据
)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境!
Vue项目结构介绍
1、build文件夹
这个文件夹主要是进行webpack的一些配置
build文件夹内容解释
相关文件 | 解释 |
---|---|
webpack.base.conf.js | webpack基础配置,开发环境,生产环境都依赖 |
webpack.dev.conf.js | webpack开发环境配置 |
webpack.prod.conf.js | webpack生产环境配置 |
build.js | 生产环境构建脚本 |
vue-loader.conf.js | 此文件是处理.vue文件的配置文件 |
2、config文件夹
相关文件 | 解释 |
---|---|
dev.env.js | 配置开发环境 |
prod.env.js | 配置生产环境 |
index.js | 这个文件进行配置代理服务器,例如:端口号的修改 |
3、node_modules文件夹
存放npm install时根据package.json配置生成的npm安装包的文件夹
4、src文件夹 源码目录(开发中用得最多的文件夹)
相关文件 | 解释 |
---|---|
assets | 共用的样式、图片 |
components | 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件 |
router | 设置路由 |
App.vue | vue文件入口界面 |
main.js | 对应App.vue创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置 |
5、 static文件夹
存放的文件不会经过webpack处理,可以直接引用!
6、 package.json
这个文件有两部分是有用的:scripts 里面设置命令以及在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包!
*.vue文件简介
- *.vue 文件,是一个自定义的文件类型,用类似HTML的语法描述一个Vue组件。
- 每个.vue文件包含三种类型的顶级语言块 template, script 和 style。
- 这三个部分分别代表了 html,js,css。
组件嵌套
打开HBuilder----打开目录----找到你创建的SPA项目-----选择文件夹
案例演示:首页-用户中心-用户
实现思路
1、src目录下新建对应的vue文件
2、vue文件中的内容和嵌套的关系保持一致
3、Vue文件的name属性要和index中的path、name一致!
注意vue文件命名最好遵循帕斯卡命名法,即首字母大写!
Home.vue
<template><div><h1>首页</h1><div><router-link to="/About">关于我们</router-link><router-link to="/UserCenter">用户中心</router-link></div><div><router-view/></div></div>
</template><script>export default{name:'Home',data:function(){return{}},methods:{}}
</script>
<style>
</style>
About.vue:
<template><div><h1>关于我们</h1><div><router-view/></div></div>
</template><script>export default{name:'About',data:function(){return{}},methods:{}}
</script><style>
</style>
UserCenter.vue:
<template><div><h1>用户中心</h1><div><router-link to="/Register">用户注册</router-link><router-link to="/UpdatePwd">修改密码</router-link></div><div><router-view/></div></div>
</template><script>export default{name:'UserCenter',data:function(){return{}},methods:{}}
</script>
<style>
</style>
Register.vue
<template><div><h1>用户注册</h1><div><router-view/></div></div>
</template><script>export default{name:'About',data:function(){return{}},methods:{}}
</script>
<style>
</style>
UpdatePwd.vue
<template><div><h1>修改密码</h1><div><router-view/></div></div>
</template><script>export default{name:'About',data:function(){return{}},methods:{}}
</script>
<style>
</style>
index.js
1、该文件需从头部引入你使用的组件
2、下面的routes路由器的线路中增加对应的模块内容
3、只能有一个根路径,即“/”,其余为子路径!
4、@/表示src的根目录
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/views/Home'
import About from '@/views/About'
import UserCenter from '@/views/UserCenter'
import Register from '@/views/Register'
import UpdatePwd from '@/views/UpdatePwd'
Vue.use(Router)export default new Router({routes: [{path: '/HelloWorld',name: 'HelloWorld',component: HelloWorld},/*此时Home为根路径*/{path: '/',name: 'Home',component:Home},{path: '/About',name: 'About',component:About},{path: '/UserCenter',name: 'UserCenter',component:UserCenter},{path: '/Register',name: 'Register',component:Register},{path: '/UpdatePwd',name: 'Updatepwd',component:UpdatePwd}]
})
效果
点击首页的关于我们:
点击首页的用户中心:
当点击用户中心的用户注册
当点击用户中心的修改密码
总结
安装vue-cli的过程中注意命令执行的先后顺序,以及最好实时联网!
Vue-cli搭建SPA项目相关推荐
- vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...
- vue之使用vue-cli搭建SPA项目
目标 1.如何使用vue-cli搭建SPA项目 步骤一:使用脚手架创建项目骨架 步骤二:运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块 步骤三:启动并访问项目 步骤 ...
- 使用vue-cli搭建SPA项目
哈喽各位本次小無分享使用vue-cli搭建SPA项目 先看本次目录吧 目录 一.如何使用vue-cli搭建SPA项目 1.什么是Vue-cli vue-cli是vue.js的脚手架,用于自动生成vue ...
- 使用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项目 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版)来构建项目 二 ...
最新文章
- linux mysql授权外部访问权限,Linux中安装Mysql授权远程访问
- c语言if语句教学设计,c语言if语句教学设计.pdf
- 计算机系统结构开设学校,计算机系统结构专业介绍及考研院校排名
- php jquery ajax实例,jQuery的$.ajax示例
- 《东周列国志》第九十回 苏秦合纵相六国 张仪被激往秦邦
- PCD文件的rgb格式
- 专访许鹏:谈C程序员修养及大型项目源码阅读与学习
- 王垠—写给清华大学的退学申请
- Android实验五-组件通信2
- 事件监听(窗口关闭、输入框事件、计算器、画笔、鼠标、窗口、键盘)
- 怎么知道云服务器cpu型号,云服务器cpu怎么查看
- 永恒之蓝ms17_010漏洞复现
- 计算机专业英语动名词句子,40句英文写作开头表达+五类加分句型
- 如何关闭计算机自动休眠状态,电脑自动待机怎么关闭【图解】
- Linux ps state sl+是什么意思
- 1024程序员节!!
- netty传输html页面,java 文件传输(netty) 实例源码
- 【Python刷题篇】Python从0到入门4|字典复习、函数入门、综合实践
- NX/UG二次开发-其他-NX标题显示工作部件路径
- STM32端口重映射