Vue.js 之browserify项目模板快速入门

Posted 2021-05-01 丫咪蒙

   在2014年vue.js出来之前前端的模块化开发主要是有 angular.js和react。vue横空出世就火了也同时个人感觉相比较与angular更加的简洁，不管是从数据渲染还是双向数据绑定来看。个人偏向于vue。vue主要是基于一些组件化的。这篇文章主要先记录一下vue基于vue-cli搭建项目模板的过程和步骤。主要参考别的文章总结的。

vueify介绍

     vueify就是以.vue格式定义的组件，一个.vue文件就是一个组件

    .vue文件定义的组件内容包括3部分

         1) <style></style> 定义组件的样式

         2) <template></template>  定义组件的结构模板

         3) <script></script>定义组件的各种选项 比如 data, methods等

     以下 app.vue文件中的主体架构内容

 

     同时这么定义组件结构内时也可以添加一些预处理语言的语法 比如 <style lang="less"></style>  这样添加一下样式的less预处理语法。

    vueify主页：https://github.com/vuejs/vueify

安装vue-cli 

•  vur-cli是一个用于快速搭建vue项目的一个脚手架，在开发的项目中非常快速高效创建项目所需要各种配置

• 安装vue-cli的要求：需要node.js和git，node.js需要4.x以上的版本

• 安装好以上工具之后，右击gitbash here 打开git命令窗口

• 执行以下命令：

•         npm install -g vue-cli

•  安装完成之后接下来开始创建vue.js项目了

一 使用vue-browserify-simple模板

    1 生产项目 右键git Bash here 

 

命令行输入：vue init  broeserify-simple  my-browserify-simple-demo （项目名称）

 

目录下面生成一个项目文件

打开项目文件 文件结构树如下所示：

├─.babelrc	// babel配置文件
├─.gitignore	
├─index.html	// 主页 ├─package.json // 项目配置文件 ├─README.md   ├─dist // 发布目录 │   ├─.gitkeep       ├─src // 开发目录 │   ├─App.vue // App.vue组件 │   ├─main.js // 预编译入口

    这里package.json主要是项目的一些配置文件，

        dependencies:项目发布是的依赖

        devDependencies:项目开发是的依赖

        scripts: 项目编译时候的一些命令

    这里.babelrc是一个将es6转换成es5 

{  "name": "my-browserify-simple-demo",
  "description": "A Vue.js project",
  "author": "keepfool <[e-mail]>",
  "scripts": {"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
    "serve": "http-server -c 1 -a localhost",
    "dev": "npm-run-all --parallel watchify serve",
    "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"  }, 
 "dependencies": {    "vue": "^1.0.0"  }, 
 "devDependencies": {    
   "babel-core": "^6.0.0", 
   "babel-plugin-transform-runtime": "^6.0.0",   
   "babel-preset-es2015": "^6.0.0",    
   "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "cross-env": "^1.0.6",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "browserify-hmr": "^0.3.1",
    "http-server": "^0.9.0",
    "npm-run-all": "^1.6.0",
    "uglify-js": "^2.5.0",
    "vueify": "^8.5.2",
    "watchify": "^3.4.0"     },
  "browserify": {    
       "transform": [      "vueify",      "babelify"    ]  } }

2 执行以下命令安装项目的依赖

cd my-browserify-simple-demo
npm install

安装完成之后会生成一个node_modules的文件夹   这时候所有的项目需要的依赖都在此文件夹下面

3 运行vue-cli项目   执行以下命令在项目的根目录下面：

npm run dev

运行之后这里需要说一下 ：

这里面的localhost:8080端口号也许有可能电脑在打开其他比如apache之类的会占用这个端口号，那端口号占用 就会报错，这里面端口号是可以更改的，只需要在package.json中的script这里serve选项中 localhost后面添加上一个port 端口号 就可以解决这个问题

4 build.js编译过程说明：

• build,js文件会在开发的时候生成build.js

• 会在发布的时候生成build.js

• 首先开发时生成build.js,在package.json中的script节点下面 三行配置：

"scripts": {
  "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
  "serve": "http-server -c 1 -a localhost",
  "dev": "npm-run-all --parallel watchify serve" }

       npm run dev 命令执行的是dev对应节点的命令 这行命令依赖一watchify以下这行命令，意思是编译src/main.js  输出到dist/build.js中

watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js

 serve节点对应的命令：http-server -c -a localhost 用于快速开启一个http-server简单的web服务器；（这里前面讲到过可以设置自定义的port端口号）执行的过程大概就是图中所示：

          发布时候生成build.js 需要执行npm run build 命令就可以生成build.js了

           uglify.js主要基于node.js的压缩程序。用于压缩css/html/js

          基于vue-browserify-simple创建vue项目模板就是以上步骤；

         接下来还有一个vue-browserify创建的项目模板：

         二者有什么区别了 前者主要简单版本的模板

          后者则更加全面添加了一些其他的用于项目开发的功能：

          1) 提供了ESlint

          2) 提供了单元测试

---

        生成项目的步骤大体都是一致的与vue-browserify-simple

       以上就是快速创建vue项目开发框架的一个大体过程

       继续编写对react angular框架的快速搭建做介绍

       然后三大框架之间的差异对比之类的

       活到老，学到老。生命不止，学习不止

 FIGHTING! ~~~~ FIGHTING! ~~~ FIGHTING!

文章参考链接：http://www.cnblogs.com/Leo_wl/p/5679556.html