码迷,mamicode.com
首页 > 编程语言 > 详细

web框架之Vue渐进式框架-安装入门简介(python3入门)

时间:2019-09-04 15:11:45      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:双向   closed   硬件   rip   HERE   alt   标签   basic   django   

1 vue: js渐进式框架
2 优点: 单页面、轻量级、数据驱动、数据双向绑定、虚拟DOM、组件化开发(页面代码的服用)
3 vue实例成员: el(挂载点)、data(数据)、methods(方法)
4 vue指令:v-text(纯文本指令)、v-html(可以解析标签)、v-once(插值表达式渲染文本)、{{}}(插值表达式)、v-on(事件指令)、v-bind(属性指令)、v-model(表单指令)、v-if、v-else-if、v-show
    @ 等价 v-on:
    : 等价 v-bind:

 

Django
前后台不分离项目 1 后台渲染页面 2 csrf-token => form post请求 3 render、HTTPResponse、redirect => JSONResponse 4 ajax => 页面局部刷新 前后台分离项目 1 前台页面自己渲染 - 自己搭建运行的服务器 2 ajax完成数据请求 3 drf(django框架) - django rest framework - restful(接口规范协议) 4 vue(js框架)- 数据驱动 学习曲线 1 vue 2 drf 3 路飞

 

Vue框架
什么是vue: 渐进式,javascript框架 前台三大主流框架: vue(轻量级) - 尤雨溪 Angular - facebook React - github 先进的前端设计模式: MVVM - 比MVC分成两部分,比MVC好 可以完全脱离服务器端,以组件化开发。(页面+样式+功能) vue的优点 1 单页面,硬件要求低 2 组件化开发 3 数据驱动 4 数据的双向绑定 5 虚拟DOM 6 轻量级

 

一、vue 环境部署

技术图片
1 安装node http://nodejs.cn/download/ 下一步下一步

2 安装cnpm (由于npm在国外,所以我们换成国内的cnmp源,避免下载安装error) sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 只要不是error 就说明安装成功

3 安装vue脚手架 sudo cnpm install -g @vue/cli

4 清空缓存处理 如果第3步安装失败,则运行下 npm cache clean --force ,然后再重新运行第3步命令
vue环境部署

 

二、vue项目创建

技术图片
    - Manually select feature
    - Check the features needed for your project
        1 Babel 将es6语法转换成es5的语法,让浏览器更好的识别
        2 Router    前端路由
        3 Vuex  仓库,组件与组件之间数据交互
        4 Linter/Formatter  
        
    - Use history mode for router? 
        由于vue页面只有一个页面,为了能后退 前进,形成历史记录(window history),所以这里选Y
    - pick a linter/ formatter config
        Basic
    - pick additional lint feature
        Line on save
    - where do you prefer placing config for Babel, CSS etc?
        in decicated config files
    - save this as a preset for future projects?
        N
    
    - cnpm run serve
1. vue create [自定义vue项目名称]
技术图片
    - 如果迁移到一个没有vue环境的项目中,需要将除了node_modules 这个文件夹以外的所有均copy到新文件夹中,
        然后执行 cnpm install 重建依赖关系
2. 项目迁移重建
技术图片
    - edit configuration
    - 填写Name(自定义)
    - packageJson:(选择到需要打开的vue项目路径中的package.json)
    - command:(run)
    - script:(serve)
    - node interpreter:(选择到node环境)
    - package manager:(选择到npm环境)
    
    - 打开pycharm的setting- Plugins- 搜索vue- install vue.js
    - restart pycharm
    - 完成!
3. 将vue项目在pycharm中打开

 

三、vue目录介绍

技术图片
- node_modules: 项目依赖
- 
- public:公用文件
    favicon.ico:页面标签图标
    index: 项目的唯一页面

- src: 项目开发文件目录
    assets: 静态资源
       css|img
    components: 小组件(*.vue)
    views: 视图组件(*.vue)
    app.vue: 根组件
    main.js: 主脚本文件
    router.js: 路由脚本文件 - vue-router
    store.js: 仓库脚本文件 - vuex

- *.xml|json|js: 一系列配置文件
- README.md:使用说明
View Code
技术图片
    import Vue from ‘vue‘   //node_modules下的依赖直接写了名字
    import App from ‘./App.vue‘ // ./代表相对路径的当前目录,文件后缀名可以省略
    import router from ‘./router‘   //@代表src目录的绝对路径
    import store from ‘./store‘
    // 在main中配置的信息就是给整个项目配置
    // 已配置vue | 根组件App | 路由 | 仓库
    // 以后还可以配Cookie | ajax(axios) | element-ui
    
    
    
    // Tips小提示
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
      // 下面两组结果也是正解
      // render: readTemplateFn => readTemplateFn(App)
      // 原生的如下:
      // render: function (fn){
      //     return fn(App)
      // }
    }).$mount(‘#app‘)   //$mount = el:‘#App‘
main.js简介

 

web框架之Vue渐进式框架-安装入门简介(python3入门)

标签:双向   closed   硬件   rip   HERE   alt   标签   basic   django   

原文地址:https://www.cnblogs.com/lich1x/p/11459156.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!