使用Vue-cli构建一个项目Vue项目
1、安装vue-cli
前提条件是已安装node、npm才可以执行下面的指令
npm install -g @vue/cli @vue/cli-init
安装成功后查看版本
这里很多人会遇到报错,具体解决方案我在下一篇文章详细解决。
vue -V
成功页面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGVhmCLR-1628736056827)(C:\Users\快定\OneDrive\桌面\笔记\笔记\image\image-20210812101410404.png)]
构建一个新的vue项目叫myqpp
vue init webpack myapp
下面为询问的信息,是官方文档的解释
Vue 依然使用询问的方式,让我们对项目有一个初始化的信息
- Project name:项目名
- Project description: 项目描述
- Author: 作者
- Vue build:
- 第一种:配合大部分的开发人员
- 第二种:仅仅中有runtime
- Install vue-router? 是否安装vue-router
- Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
- Pick an ESLint preser:使用哪种语法规范来检查我们的代码:
- Standard: 标准规范
- Airbnb: 爱彼迎规范
- Set up unit test: 设置单元测试
- Setup e2e tests: 设置端对端测试
- Should we run 'npm install':要不要帮忙你下载这个项目需要的第三方包
- 使用npm来下载
- 使用yarn来下载
选择完成之后会出现提示页面
To get started:
cd myapps
npm run dev // 使用命令启动项目
按照指令运行完之后
Your application is running here: http://localhost:8080
浏览http://localhost:8080地址,出现vue欢迎界面就安装成功了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X751oXT9-1628736056829)(C:\Users\快定\OneDrive\桌面\笔记\笔记\image\image-20210812102330681.png)]
2、项目结构介绍:官方文档的介绍
├── build webpack打包相关配置文件目录
├── config webpack打包相关配置文件目录
├── node_modules 第三方包
├── src 项目源码(主战场)
│ ├── assets 存储静态资源,例如 css、img、fonts
│ ├── components 存储所有公共组件
│ ├── router 路由
│ ├── App.vue 单页面应用程序的根组件
│ └── main.js 程序入口,负责把根组件替换到根节点
├── static 可以放一些静态资源
│ └── .gitkeep git提交的时候空文件夹不会提交,这个文件可以让空文件夹可以提交
├── .babelrc 配置文件,es6转es5配置文件,给 babel 编译器用的
├── .editorconfig 给编辑器看的
├── .eslintignore 给eslint代码风格校验工具使用的,用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js 给eslint代码风格校验工具使用的,用来配置代码风格校验规则
├── .gitignore 给git使用的,用来配置忽略上传的文件
├── index.html 单页面应用程序的单页
├── package.json 项目说明,用来保存依赖项等信息
├── package-lock.json 锁定第三方包的版本,以及保存包的下载地址
├── .postcssrc.js 给postcss用的,postcss类似于 less、sass 预处理器
└── README.md 项目说明文档
3、项目部分代码解读
入口文件main.js
// 入口文件
// 以es6模块的方式引入 vue APP router 三个模块;
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
// 获取节点对象
el: '#app',
// 引入路由
router,
// 本实例的私有组件
components: { App },
// el 与 template 在同一个实例中出现,
// 根据生命周期的执行顺序可知,template中的内容会替换el选中的内容
template: '<App/>'
})
roter/index.js
路由定义页面
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// Vue 中插件引入语法
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router)
// ES6模块导出语法
export default new Router({
routes: [
// 定义一个路由规则
{
path: '/', // 请求路径
name: 'HelloWorld', // 路由名称标识
component: HelloWorld //请求此路由时,使用的组件
}
]
})
components/HelloWorld.vue
组件实现页面:
<script>
export default {
// 模块名字
name: 'HelloWorld',
// 组件中 data 数据必须是一个有返回值的方法
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
3、自定义路由组件
修改 router/index.js ,添加自己的路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入自定义组件A1、A2、A3
import A1 from '@/components/A1'
import A2 from '@/components/A2'
import A3 from '@/components/A3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// 添加自己的路由及组件
{
path: '/a1',
name: 'A1',
component: A1
},
{
path: '/a2',
name: 'A2',
component: A2
},
{
path: '/a3',
name: 'A3',
component: A3
}
]
})
在 components 文件夹中添加 A1.vue、A2.vue、A3.vue 文件,写自己的组件代码:
A1.vue
<template>
<h2>a1页面</h2>
</template>
<script>
</script>
<style>
</style>
A2.vue
<template>
<h2>A2页面</h2>
</template>
<script>
</script>
<style>
</style>
A3.vue
<template>
<h2>A3页面</h2>
</template>
<script>
</script>
<style>
</style>
修改app.vue实现点击切换路由:
<template>
<div id="app">
<router-link to="a1">a1</router-link>
<router-link to="a2">a2</router-link>
<router-link to='a3'>a3</router-link>
<!-- <img src="./assets/logo.png"> -->
<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>
4、实现页面展示:
首页:
点击a1
点击a2
这样就基本实现了一个vue项目的初始化。