Vue入门,一切从vue-cli开始

​

1 从vue-cli 开始

官方文档： https://cli.vuejs.org/zh/guide/

vsCode中的终端没有管理员权限时：用管理员权限运行 Windows PowerShell，执行命令：

set-ExecutionPolicy RemoteSigned

用 get-ExecutionPolicy 命令查看当前设置；

1.1 安装node.js 和 vue

官方下载： https://nodejs.org/en/download

npm: Node Package Manager（即 npm） (node.js的包管理工具)

配置 npm 远程仓库地址：

npm config set registry https://registry.npm.taobao.org

安装 vue-cli

npm install -g @vue/cli

-g 是全局的意思，表示当前操作系统中所有用户均可使用，并自动配置 Vue 环境变量

安装完成后查看vue版本（注意大写的V）

vue -V

1.2 创建 vue-cli 工程

Vue CLI 现已处于维护模式!

现在官方推荐使用 create-vue 来创建基于 Vite 的新项目或用ui界面管理插件；

命令：

vue ui

进入ui界面选择创建即可；

也可以用命令创建：

vue create vue-project-01

工程基本选项：

我选择的是 vue2.0

工程选项选择了：Babel ,Router , Vuex

Babel ： ES6 高级语法向低版本语法兼容的工具；
Router ：路由管理器；
Vuex ：全局状态管理工具，管理内存中全局共享的数据 ；
Linter ：代码规范检验工具，其要求较严格，初学者建议不要选；

工程创建完毕后，启动工程：

进入工程目录，开启终端，（建议是配置vscode的终端）执行命令：

npm run serve

关闭工程： 在终端按 ctrl+c

1.3 安装 element-ui 和 axios
element-ui 官方地址（各种组件代码和用法）：

用命令安装：

npm i element-ui -S
npm i axios -S

在main.js中配置 element-ui 和 axios

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import axios from 'axios'
Vue.prototype.axios = axios

#Vue.use(Element UI) 第一个参数应是插件本身，可选的第二个参数是要传递给插件的选项。
#插件可以是一个带 install() 方法的对象，亦或直接是一个将被用作 install() 方法的函数。插件选项 (app.use() 的第二个参数) 将会传递给插件#的 install() 方法。
#若 app.use() 对同一个插件多次调用，该插件只会被安装一次。

#Vue.prototype.axios = axios ,给Vue函数添加一个原型属性KaTeX parse error: Expected 'EOF', got '#' at position 15: axios 指向Axios #̲这样做的好处是在vue实例或组…axios就能执行axios 方法了
#vue3中用 app.config.globalProperties 替代 Vue.prototype 这种写法

2.项目介绍

2.1启动项目

package.json 中启修改端口号并动项目
鼠标悬停在 scripts 下的 serve上,会出现运行脚本 | 调试脚本,点击即可启动项目
或者用命令启动: npm run serve

2.2各个文件说明

​#### main.js程序入口文件，是初始化vue实例并使用需要的插件，加载各种公共组件。

import Vue from 'vue'
/* 引入 vue.js 文件,完整的写法   import Vue from "../node_modules/vue/dist/vue.js"; */
import App from './App.vue'
import router from './router'
/* 引入 vue.js 文件,完整的写法   import Vue from "./router/index.js"; */
/* 如果from的来源是文件夹，那么在package.json存在且设置正确的情况下，会默认加载package.json；
  若不满足，则加载index.js；若不满足，则加载index.vue。 */

import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.use(ElementUI);
Vue.prototype.axios = axios

Vue.config.productionTip = false
/* 为true时,会有提示警告来帮助你处理常见的警告和陷阱;
  默认为false是因为生产环境下,这些警告可能会应用体积而且警告检查还有一些小的开销 */

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
/* 
router  注册路由,
store 注册全局状态管理,状态就是数据,
render: h => h(App) 是下面内容的缩写:
render: function (createElement) {
    return createElement(App);
}
进一步缩写:
render (createElement) {
    return createElement(App);
}
再进一步:
render (h){
    return h(App);
}
再按照箭头函数的写法:
render: h => h(App);
createElement 这个函数的作用就是生成一个 VNode节点，
render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上;

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。
*/

​#### index.html 主页，项目入口 ;
main.js 中 mount 的就是这个 div;

App.vue 本质上也是一个js文件，相当于一个模板文件;

当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。
参照 Vue router 的官方文档: https://router.vuejs.org/zh/guide/

Home | About

```

router/index.js 路由

当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们;
在vue文件中，即通过或者来渲染路由匹配到的组件,在上边的 app.vue 文件中通过来路由到 components/HelloWorld.vue ;

views/HomeView.vue 和 views/AboutView.vue

这个两个文件都是定义的一个路由组件, HomeView.vue 作为 components/HelloWorld.vue 的父组件 ,子组件接收父组件 HomeView.vue的数据;
HelloWorld.vue 用 export 导出了 ‘HelloWorld’ 组件,该组件中用 props 选项给该组件定义了一个 ‘msg’ 属性,这个属性作为组件实例的属性使用;
HomeView.vue 用 import HelloWorld from '@/components/HelloWorld.vue' 导入了 ‘HelloWorld’ 组件 ,
在导出自身 ‘HomeView’ 组件时注册了 ‘HelloWorld’ 组件 (components是局部注册组件，注册后只能在当页调用)

HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- 在使用子组件 HelloWorld 时,通过属性传值,将 msg 的 值传递给子组件 -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// 通过 import 导入子组件

export default {
  // export 导出自身作为一个视图组件
  name: 'HomeView',
  components: {
    HelloWorld
  }
  // 以components的形式注册组件(components是局部注册组件，注册后只能在当页调用。)
}
</script>

总结:

main.js作为项目入口文件,该文件中不适合写其他逻辑,所以分出一个子组件 App.vue, 我们使用的时候就把这个子组件（App.vue）当做我们的顶级组件;
访问主页http://localhost:8080/ 的时候, main.js 会找到其实例挂载的位置,即 index.html中的

, 但马上就被 template 模板内容替代;