【万字长文】 Vue全家桶从入门到实战，初学者必备

-package-lock.json ----> 对package.json加锁

-README.md ----> 项目说明文件

3.如何运行在项目的根目录中执行

npm run dev 运行前端系统

4.如何访问项目

http://localhost:8080

5.Vue Cli中项目开发方式

注意: 一切皆组件 一个组件中 js代码 html代码 css样式

1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统

2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

rc 目录

src目录是项目的源码目录，所有代码都会写在这里！

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’ // 引入一个当前目录下的名字为App.vue的组件

import router from ‘./router’

Vue.config.productionTip = false // 是否要在生产环境当中给予提示功能。

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})

• import Vue from 'vue'：ES6 写法，会被转换成 require(“vue”); （require 是 NodeJS 提供的模块加载器）其实就相当于

<script src = "vue"></script>

• import App from './App' ：意思同上，但是指定了查找路径，./ 为当前目录

• Vue.config.productionTip = false：关闭浏览器控制台关于环境的相关提示

• new Vue({})：实例化 Vue

• el: '#app'：查找 index.html 中 id 为 app 的元素

• template: '<App/>'：模板，会将 index.html 中替换为

• components: { App } ：引入组件，使用的是 import App from ‘./App’ 定义的 App 组件;

App.vue

自定义脚手架

• template：HTML 代码模板，会替换 < App /> 中的内容

• export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入

• name: ‘App’：定义组件的名称

• components: { HelloWorld }：定义子组件

• 在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的! 不加代表全局有效。

index.js 配置路由

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

Vue.use(Router) //注册路由 new Vue({router,})

export default new Router({

routes: [

{

path: ‘/’,

name: ‘HelloWorld’,

component: HelloWorld

}

]

})

HelloWorld.vue

4、如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

1、我们在HelloWorld.vue的同级目录下新建两个Student和User组件。

---

2、Student.vue和User.vue组件

Student.vue组件

hello world