vue入门

目录

一、vue

1.vue-cli

解释：
browserify:
browserify-simple:
pwa:
simple:
webpack:vue项目通过此创来打包降级es5
webpack-simple:

2、初始化并运行vue项目

1）.vue init webpack myvue

（1）在某个位置创建一个**文件夹，**然后通过运行转到此位置，输入命令：vue init webpack myvue(这个myvue是初始化项目的名字）
之后enter键：
Project name(myvue)
project description(A vue.js project)
Author:yourself(随便写）
vue build:选第一个（即运行时编译）
install vue-ruter-------no，（为了体验手动创建，注意：把Use ESLint to lint your code 选Yes）
。。。。

2）npm install

运行转到手动创建的vue项目（必须转到自己新建的项目路径下，否则后面会因为找不到package.json出错），之后安装依赖环境npm install,安装完后，myvue文件夹中会多出node_modules文件夹。要是报错了，就按照要求‘npm audit fix’‘npm audit fix --force’

3）npm run dev

通过idea open新建立的myvue文件夹，这时此文件夹内会生成.idea.
在运行中转到myvue,输入命令npm run dev，它打包之后才能运行。(不知道为什么第一次运行出现了错误，我重新init，然后把Use ESLint to lint your code 选Yes，其他能选no就选no，最后一个选no，在按原来顺序执行，就可以了）
成功界面：

想要停止：ctrl+c 打出yes
若想再次运行：①以管理员–运行转到myvue下，然后输入npm run dev
②找到idea的exe文件，右键属性–以管理员运行。

二、webpack

安装webpack:

配置

各个版本可以在项目下的package.json中查看
vue，js之间：互相用import,export.
export 暴露接口 ----
import导入---------
require------加载模块
接口里面的变量在自己的作用域里有效
amd:可以异步加载，可提速，但提高了开发成本
cmd
es6模块：可在编译时报错

（注：1–在电脑上创建一个空文件夹
2-----在idea中打开并在目录下建个modules，用于存写js文件）

3-4:

5再文件夹项目下生成此js文件，不要写再modules内，且入口re.js是加载接口的文件，output是输出的接口，一般填./js/bundle.js。

结果：
在terminal中或cmd中写webpack，（出错的话会考虑改成管理员权限），然后再目录中会生成dist，内容被打包成json格式。

---

！！之后新建一个html文件，再其src中引用打包生成的js,点击浏览器查看即可看到自己写的内容。

结果：

再此项目地址下cmd输入：webpack --watch，webpack会监听变化，一旦变化就会重新打包。

三、路由vue-ruter

(vue特点：热部署，不用刷新即改即查)
scopeed表示style属性只在当前作用域有效，不加则代表所有页面下都有效）

</style scoped>
</style>

）
1.先用1的脚手架创建项目，再cmd。

2.删除没用的内容，如components目录下的组件，删除logo图片，可以只保存app.vue,main.js,
然后再compoents目录下新建一个Content.vue文件，用于存放自己写的组件。

3.再src目录下新建一个文件夹：router,专门存放路由。

4.再main.js中配置路由。
（./router表示引用router目录下的index.js文件）

5.再app.vue中使用路由

四.vue+emelment ui

打开新建的文件夹工程，再src下新建views文件项（views存放视图组件（如首页，Login等，component存放功能型组件）
写好组件，存进路由，配置路由，使用路由后，运行，发现出错为：
TypeError:this.getRsolve is not a funtion后，是因为sass版本太高，应将package.json中改成"sass-loder":“^7.3.1”,再运行npm install,不行的话cnpm install,不出错后，
完全引入emelment ui:

只有引入element ui，放入vue组件的效果才能被展现出来。
运行npm run dev即可。

（代码摘自element ui）

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

五、嵌套路由children

1.待嵌套的组件：
再views下新建一个目录user,用于存储信息组件如Profile,List.
2.存入路由

3.再main组件下写入，不要再app.vue中写，是哪个的嵌套路由，在哪个组件下写，router-link必须再template下的大div标签下包裹着。
（必须加上<router-view/ >才能看出结果）

六、参数传递及重定向

1.参数传递

(2种方式）

①params

1.传：
被嵌套组件vue传一个参数id.

2.接收：
路由通过‘/’绑定id , “/：id”

3.用户展示：
嵌套路由再< template >< /template>内用{{$route.params.id}}引用展示出来。
template模块内只能有一个大标签。
(跳转页面代码）

//使用vue-router路由到指定页面，该方式称之为编程式导航
this.$router.push("/main);
//main为路由中已被存入的组件。

②props解耦

1.传参是不变的：

2.再{}中增加一个属性props：true

3.用props接收，并表示。
效果：

2.重定向：redirect

当点击/goHome对应的路由时，会跳转到/main对应的页面。

七、.404和路由钩子

1.路由模式及404

1.mode

2.404
也就是再写一个vue组件，组件上是一个显示为404的页面。
path:'*'的意思是，以上都为匹配到，走这个。

2.路由钩子及异步请求

1.再组件中写：

一般是为了进入新页面，提前加载数据用的，是一个拦截的作用。
2.首先要想加载数据，就要获得数据，先安装axios.

3.引入axios:

4.再static下新建mock,表示存放的是测试数据

5.接收传输：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

注：如何引入json数据？


（代码中还讲述了，可以采用v-clock解决闪烁暴露”{{模板参数}}“的方法。）

总结

完结