zoukankan      html  css  js  c++  java
  • Vue入坑教程(一)——搭建vue-cli脚手架

    1. Vue简介

    详细内容可以参考官网Vue.js

    1)兼容性

    Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

    目前ECMAScript 6已经渐渐流行起来,但是有一些浏览器还不完全支持,所以在使用ECMAScript 6时,可以通过Babel转码器进行转换

    2)使用方式

    (1) 直接用<script>引入

    直接在html页面中引入<script>Vue 会被注册为一个全局变量。

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    

    这个适合单独的H5页面的使用

    (2)命令行工具vue-cli

    适合构建大型应用,配合npmnpm能很好的和webpack等模块打包器配合使用。

    # 全局安装vue最新版
    $ npm install vue
    

    2. 环境搭建

    1)安装node.js

    傻瓜式安装,官网下载node.js,一路点击下一步安装。

    打开命令行工具,输入node -v,如果显示node 版本号,则表示安装成功。

    注意:官网安装的node.js后,就已经自带包管理工具npm

    2)安装淘宝镜像cnpm或是yarn

    原因:这一步也可以省略,安装的理由是npm的服务器是外国,有时候我们安装依赖执行的操作超级慢,而cnpm 或是 yarn执行的速度较快,特别是在执行npm indstall时,淘宝镜像cnpm installyarn相对比较明显的快。

    淘宝镜像安装:
    打开命令行工具,输入

        npm install -g cnpm --registry= https://registry.npm.taobao.org
    

    安装完后,通过cnpm -v查看版本号来判断是否安装成功

    yarn
    参考官网教程yarn 安装

    注意:推荐使用淘宝镜像或是yarn,接下来下面都是用淘宝镜像执行的。

    3)全局安装vue-cli

    # 全局安装
    cnpm install -g vue-cli
    

    同样通过命令行工具使用vue -V 查看版本号判断是否安装成功

    3. 构建项目

    1)初始化一个项目

    在一个文件夹下面初始化来新建一个工程项目,推荐使用git自带Git Bash Here

    # vue init 是vue初始化项目
    # webpack 是打包工具,其中也可以使用Browserify,感兴趣可以自行研究
    # project 是自定义的项目名称
    vue init webpack project
    

    命令执行之后,会在当前目录下生成一个以project命名的项目文件夹。

    命令执行时会显示下列选项:

    $ vue init webpack project--------------------- 安装vue脚手架的命令,采用webpack打包工具,项目名是project
    This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
    For Vue 1.x use: vue init webpack#1.0 project
    ? Project name (project) ---------------------项目名称
    ? Project name project
    ? Project description (A Vue.js project) ---------------------项目描述
    ? Project description A Vue.js project
    ? Author wujy--------------------- 项目创建者
    ? Author wujy
    ? Vue build (Use arrow keys)
    ? Vue build standalone
    ? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,推荐安装,是页面跳转用的
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no,因为这里有很多的坑,具体以后会讲
    ? Use ESLint to lint your code? No
    ? Setup unit tests with Karma + Mocha? (Y/n) n  ----------------是否安装单元测试,因人而异,可以自行选择
    ? Setup unit tests with Karma + Mocha? No
    ? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安装e2e测试,可自行选择
    ? Setup e2e tests with Nightwatch? No
    vue-cli · Generated "project".
    To get started: --------------------- 这里说明如何启动这个服务
    cd project   --------------------进入项目文件夹
    npm install	  ---------------------安装依赖,推荐使用淘宝镜像cnpm
    npm run dev  -----------------------项目运行
    

    2)运行项目

    执行上述操作之后,可以看到本地多了一个project文件夹

    # 运行项目
    cd project  ------------进入工程目录
    cnpm install  -------------安装依赖,如果要具体安装其他模块可以单独使用,具体以后讲
    # 执行之后,目录里多了一个node_modules文件夹,这里放的就是所有依赖的模块
    cnpm run dev   ------------运行项目
    # 打包工作,用于正式环境
    cnpm run build
    

    本地localhost:8080就可以打开一个HelloWorld.vue,默认服务器启动的是8080端口,当然也可以通过更改配置来修改默认端口

    4. 文件目录分析

    build	-------------------项目构建相关代码(webpack配置)
    	build.js  -------------生产环境构建代码
    	check-versions.js  ----检查node、npm等版本
    	utils.js  -------------构建工具相关
    	vue-loader.conf.js  ----css加载器的配置
    	webpack.base.conf.js  ---webpack的基础配置信息
    	webpack.dev.conf.js  ----webpack开发环境配置信息,构建开发本地服务器
    	webpack.prod.conf.js  ---wenpack生产环境配置信息
    config	-------------------配置目录,包括端口号,打包输出等的vue基本配置文件
    	dev.env.js  -----------开发环境变量
    	prod.env.js -----------生产环境变量
    	index.js  -------------项目的配置变量,端口号等 
    node_modules	-----------加载的项目依赖模块
    static	-------------------静态资源目录
    index.html	---------------首页的入口文件,可以添加meta等参数
    README.md	---------------项目的说明文档,makedown格式
    src	-----------------------源码目录,主要的开发
    	assets  ---------------静态资源,css,image等可以存放
    	components  -----------公共组件
    	router  ---------------路由文件夹,配置页面跳转
    	views  ----------------页面编写的地方,(可以自行定义命名)
    main.js  ------------------入口文件,全局的配置和加载
    .babelrc  -----------------ES6语法编译配置,用来将es6代码转换成浏览器可识别的es5代码
    .gitignore  ---------------git上传需要忽略的文件的格式
    package.json  -------------项目的基本信息,包括开发所需要的模块、项目名称、版本号等
    .postcssrc.js  ------------转换css的工具
    .editorconfig  ------------定义代码格式
    

    综上所述:
    详细文件的分析可以参考官网vue.js
    初次尝试vue,可以用普通的引入javascript文件的方法。如果有一定的基础,可以用vue-cli脚手架进行进阶的操作

  • 相关阅读:
    2016"百度之星"
    codeforces 55 div2 C.Title 模拟
    codeforces 98 div2 C.History 水题
    codeforces 97 div2 C.Replacement 水题
    codeforces 200 div2 C. Rational Resistance 思路题
    bzoj 2226 LCMSum 欧拉函数
    hdu 1163 九余数定理
    51nod 1225 余数的和 数学
    bzoj 2818 gcd 线性欧拉函数
    Codeforces Round #332 (Div. 2)D. Spongebob and Squares 数学
  • 原文地址:https://www.cnblogs.com/real-me/p/9103999.html
Copyright © 2011-2022 走看看