搭建过程

vue.min.js文件

element组件以及main.js导入

vue学习

npm、vue-cli、webpack工具下载和使用了解

1. 从MVC框架到MVVM框架
2. vue基本操作
3. node.js安装、npm安装、webpack安装

   第一个程序

   组成：index.js\main.js\App.vue\Helloworld.vue

   index.js

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

   main.js

• import Vue from 'vue'：ES6 写法，会被转换成 require("vue"); （require 是 NodeJS 提供的模块加载器）
• import App from './App'：意思同上，但是指定了查找路径，./ 为当前目录
• Vue.config.productionTip = false：关闭浏览器控制台关于环境的相关提示

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

  • el: '#app'：查找 index.html 中 id 为 app 的元素
  • template: '<App/>'：模板，会将 index.html 中 <div id="app"></div> 替换为 <App />
  • components: { App }：引入组件，使用的是 import App from './App' 定义的 App 组件

    App.vue

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

• import HelloWorld from './components/HelloWorld'：引入 HelloWorld 组件，用于替换 template 中的 <HelloWorld/>

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

  • name: 'App'：定义组件的名称
  • components: { HelloWorld }：定义子组件

    helloworld.vue

    和app相同

    第一个路由

    安装vue-routernpm install vue-router --save-dev

    结构配置

    无法写入文件解决
    content.vue、router文件夹、router\index.js文件
    通过import引入
    通过使用路由

    第一个工程项目

    # 进入工程目录
    cd hello-vue
    # 安装 vue-router
    npm install vue-router --save-dev
    # 安装 element-ui
    npm i element-ui -S
    # 安装 SASS 加载器
    npm install sass-loader node-sass --save-dev

• npm查看版本 npm list vue-router(文件名

• 用dart-sass替代node-sass

  第一个 ElementUI 页面 (登录页)

• assets：用于存放资源文件

• components：用于存放 Vue 功能组件
• views：用于存放 Vue 视图组件
• router：用于存放 vue-router 配置
• Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错 卸载当前版本 npm uninstall sass-loader 安装 npm install sass-loader@7.3.1 —save-dev
• npm run server报错原因之一：Cannot find module ‘webpack-cli/bin/config-yargs npm install webpack-cli

routes 中的path为网页路径
hash模式和history模式配置：在router下面的index.js修改即可

框架使用thinkphp+vue

通过vue已经完全实现前后端分离，所以就不用再考虑thinkphp的mvc框架了

前后端都分离了，所以你就不用去想 Vue 怎么往 TP 里揉了。 Vue 写前端页面呈现。TP 写后端接口就成了。

所有路由跳转都是前端完成的，跟TP无关

首先vue跟jq还是有很大的差别，vue在前端的意义不仅仅是操作和渲染数据，还具备全局以及组件化的功能。前后分离应用上，数据交互仅使用json传输，后端负责api，前端负责接收。对于vue-cli有自己的结构于后端毫无关系，最终前端打包后，后端只需要将入口文件index.html作为前端网站即可。开发过程中，前端可以不打包用跨域的方式进行数据传递，也可以打包上传在同域下进行数据交互

用了vue就没有tp模板了，tp要做的就是controller里所有的方法都是以ajax方式接收和返回的，前后端分离的模式