1、脚手架介绍
1.1、什么是脚手架
- 含义: 书写一个项目最基础的一个目录结构。这个目录中包含了我们需要创建的文件等等。我们可以在这个基础上直接开发。
1.2、安装脚手架
-
vue-cli
-
网址:https://cli.vuejs.org/zh/guide/cli-service.html
// 前提安装了node.js npm i vue-cli -g // 将脚手架全局安装到电脑
-
如果安装慢,可以使用淘宝镜像安装。
-
首先需要安装淘宝镜像
// 执行这个命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
-
检测一下淘宝镜像是否安装成功
cnpm -v // 显示版本号代表安装成功,提示不是内部命令说明安装失败
-
以后所有的npm命令安装内容,都可以使用cnpm安装
npm i 包名 --save/-g cnpm i 包名 --save // 将npm换成cnpm 就会从镜像去下载
-
-
-
检测安装是否成功
// 重新打开命令行 vue -V // 如果输出版本号说明安装成功,如果 提示Vue不是内部命令,说明安装失败
1.3、初始一个Vue项目
// 找到你要存放项目的目录
vue init webpack aaaaa
// 出现如下:
? Project name aaaaa // 项目名称 回车
? Project description A Vue.js project // 项目描述 回车
? Author // 项目作者 回车
? Vue build standalone // 选择上面那个, 含有“for most user” 那个
? Install vue-router? Yes // 是否安装路由 回车
? Use ESLint to lint your code? No //代码检测 No
? Set up unit tests No // 单元测试 No
? Setup e2e tests with Nightwatch? No // 测试 No
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys) // 提示你安装包
❯ Yes, use NPM // 直接使用npm 安装所有需要包
Yes, use Yarn // 直接使用yarn安装所有需要包
No, I will handle that myself // 等一下,自己操作
cd aaaa // 进入该目录
npm install // 下载脚手架需要的包,我们可以使用cnpm i
npm run dev // 将项目运行起来
2、目录介绍
--| build // webpack的一些配置文件
----| webpack.base.conf.js // webpack基础文件
----| webpack.dev.conf.js // 开发环境下的webpack配置文件
----| webpack.prod.conf.js // 生成环境下的webpack配置文件
--| config // 配置文件
--| node_modules // 依赖包
--| src // 开发目录 (前端开发工作都在这里面)
--| static // 静态文件, js,css,字体文件等等。 这些静态文件不会被webpack进行打包
--| .babelrc // babel配置文件 【不操心】
--| .editorconfig // EsLint 的配置文件 【不操心】
--| .gitignore // git 忽略的文件 【不操心】
--| .postcssrc.js // css配置文件
--| index.html // 这就是单页面。 【重要】 【无需操心】
--| package.json // 包配置文件 【重要!!!】
--| READEME.md // 项目说明文件 【不操心】
2.1、开发目录介绍
--| src // 开发目录
----| assets // 静态文件。 里面一般存放css,img,其他。 但是这里的文件会被webpack进行打包
----| components // 组件
--------| xxx.vue // 一个组件文件
----| router // 路由
--------| index.js // 路由文件
----| App.vue //根组件
----| main.js // 入口文件
3、文件介绍
3.1、main.js介绍
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入Vue
import App from './App' // 引入根组件
import router from './router' // 引入路由
Vue.config.productionTip = false // 控制台是否显示在哪种开发模式下
/* eslint-disable no-new */
new Vue({
el: '#app',
router:router,
components: { App:App },
template: '<App/>'
})
3.2、路由文件
import Vue from 'vue' // 引入Vue
import VueRouter from 'vue-router' // 引入VueRouter
import HelloWorld from '@/components/HelloWorld' // 引入某个组件 @代表src
Vue.use(Router) // 将Router注入到Vue里面去
//export default 对象 // 暴露一个默认模块
//export default = new Router({
let router = new Router({
linkActiveClass:"active",
mode:"hash/history"
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
export default router; // 暴露
3.3、组件文件
<template>
<div class="hello">
<!--组件模板-->
123123123
</div>
</template>
<script>
//export default 组件配置对象
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
methods:{},
watch:{},
// ....
}
</script>
<style scoped>
/**组件样式**/
</style>