zoukankan      html  css  js  c++  java
  • 转载 VUE+WebPack环境搭建 https://segmentfault.com/a/1190000010960666

    一、vue有两种使用方式:

    1.下载vue.js

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

    2.使用npm

    npm install vue
    

    二、在vue的mvc思想基础上,会有很多想实现的功能,可以不必原生写。比如ajax请求,各种插件。

    安装vue-cli,促使这些插件可以在vue上运行。

    npm install vue-cli -g
    

    三、vue安装成功测试

    cmd 中,(vue各种模板)

    vue -V
    
    vue list 
    

    四、使用vue,结合webpack开发。

    从vue的角度讲,使用了模块化编写代码。

    从webpack的角度讲,编译后的代码,页面全是js写的,别人看不懂,也压缩了文件大小。

    五、vue+webpack简单流程操作

    1、文件夹中、shift+右键,选择“在此处打开命令窗口”

    vue init webpack test
    

    test是项目名字

    2、
    图片描述

    1.项目名字,
    2.项目描述,
    3.项目作者,
    4.使用vue什么模式,
    5.是否安装vue路由,
    6.是否使用eslint检查代码(建议no,严格要求es6编码),
    7.不知道, 
    8.不知道,

    3、进入项目文件夹,shift+右键,选择“在此处打开命令窗口”

    npm install
    

    此步骤就是安装package.json中预设,要装的插件。

    4、
    图片描述

    1.build,vue能进行模块化编写,就靠它配置文件
    2.config,webpack能打包,就靠它配置文件
    3.dist,这个是打包后才出现的文件夹。里面装的就是打包后的项目文件
    4.node_modules,安装vue各种插件的地方
    5.src,项目编写的地方 assets,装资源的地方,图片,字体等

    components,装模块,或者网页的地方。文件均为**.vue
    
    router,配置路由,哪个地址,分配component下的哪个网页
    
    App.vue,本身就是个components挂在外面的index.html上。index相当于投资人,甩手掌柜,App.vue相当于职业经理人,网页的事它主管。
    
    main.js,和主管App.vue配套的,主管js。

    6.static,有它可以使用git项目版本管理
    7.index.html,vue网页入口
    8.package.json ,内置初始插件名称。后期再安装插件,npm i 插件名 --save ,可以保存进文件内

    5、.vue可以看成是.html,都有标签代码区域,js区域,css样式区域。

    又不同于.html,作用域都是独立的。所以js引用必须import导入,export导出。
    

    6、运行项目
    项目文件中,shift+右键,选择“在此处打开命令窗口”

    npm run dev 
    npm run build 
    npm start
    

    dev就是webpack的开发模式,开发模式,就是压缩文件之前 
    build就是项目完成后开始压缩文件,文件夹中出现dist文件夹,里面就是压缩后的项目
    进入dist文件夹,shift+右键,选择“在此处打开命令窗口” (运行项目)

    完结~然后就可以开始专注于代码的编写~
    空缺错误之处,欢迎指导~

  • 相关阅读:
    图形与文本
    Cookie处理函数练习
    jspSmartUpload上传下载全攻略
    SmartUpload 上传图片
    无下拉菜单
    servlet中使用SmartUpload组件实现上传
    乱码
    DIV+CSS 要兼容 IE8.0 应注意些什么?
    虚拟目录中的web.config不被上级目录的web.config影响的处理
    ASP.NET抓取页面源代码
  • 原文地址:https://www.cnblogs.com/tanl/p/9144867.html
Copyright © 2011-2022 走看看