Python之web开发Vue.js 资料前端Vue专辑

vue搭建项目框架

2017-09-05  本文已影响428人  我是七月

1.安装 Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.使用 Homebrew 进行安装node.js：

 brew install node

安装完成后，可以使用以下命令检测是否安装成功：

$ node -v
v6.3.1
$ npm -v
3.10.3
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

3.安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm

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

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。
4.升级 npm

cnpm install npm -g
  1. 安装 webpack: （全局安装） // 查看版本：
    webpack -v 
npm install webpack -g

webpack它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

  1. 安装 vue.js // 查看版本: vue -v
npm install vue -g
  1. 安装vue命令行工具(安装vue脚手架)，用于生成Vue工程模板
npm install -g vue-cli

用户生成Vue工程模板

通过以上，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录，然后：

vue init webpack projectName

解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中

vue init webpack projectName

Project name projectName        // 项目名称
Project description es6              // 项目简介
Author Wake                                 // 项目作者
Use ESlint to lint your code? n   //  是否使用es6代码风格检查器
Setup unit tests with Karma + Mocha? y    // 是否需要用Karma + Mocha进行单元测试
Setup e2e tests with Nightwatch? y

结束之后，至此,一个空的vue.js的项目就完成了!

到这里是不是已经开始跃跃欲试了?先别着急,现在的前端项目依赖了很多东西.相关的依赖我们可以打开package.json文件看看,
最上面是项目一下基本配置
在dependencies和devDependencies是一些依赖库和第三方组件，下面是我的项目正在用的一些组件

 "dependencies": {
    "axios": "^0.16.2",
    "mint-ui": "^2.2.7",
    "moment": "github:moment/moment",
    "vue": "^2.3.3",
    "vue-echarts-v3": "^1.0.4",
    "vue-router": "^2.3.1",
    "vuex": "^2.3.1",
    "vue-carousel-3d":"^0.1.18"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^3.5.0",
    "chalk": "^1.1.3",
    "chromedriver": "^2.27.2",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^4.0.0",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.30",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.12",
    "node-sass": "^4.5.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "rimraf": "^2.6.0",
    "sass": "^0.5.0",
    "sass-loader": "^6.0.5",
    "scss": "^0.2.4",
    "scss-loader": "^0.0.1",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },

cd 到项目目录下，然后执行npm install去安装所有的依赖库.经过漫长的等待,整个项目所依赖的库文件都被下载到了node_modules这个文件夹下面.
至此,整个项目的环境,依赖都搞定了,我们可以开始尝试运行看看了.在项目的根目录执行命令npm run dev,他监听的端口是8080.然后看到下面的页面就说明我们已经运行成功了呢.

运行成功

还可以用yarn创建项目

Yarn是Facebook发布的一款依赖管理工具，它比npm更快、更高效。
英文官网：https://yarnpkg.com/
中文网站：http://yarnpkg.cn/zh-Hans/

特点

1.超凡快速
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
2.超群安全
在执行代码之前，Yarn 会使用校验和来验证每个已安装的包的完整性。
3.超级可靠
使用详细简洁的锁文件格式和确定性的安装算法， Yarn 能够保证在不同系统上无差异的工作。

  1. 安装yarn
npm install -g yarn

安装完成后，你可以测试下自己的版本

yarn --version

2.安装完毕后，重点来了，我们下载的资源包默认地址都是在国外，由于众所周知的原因，往往会下的很慢，甚至下载失败。所以我们要配置yarn的下载依赖包的仓库地址，使用淘宝镜像是目前最好的选择:

yarn config set registry http://registry.npm.taobao.org

运行之后，我们可继续运行下面这条命令来查看，yarn的下载依赖包的仓库地址是否已经改变

yarn config get register

3.在日益流行前端工程化中，很多同学喜欢使用sass，然而node-sass的下载在国内是个老大难的问题，如果你不翻墙，默认下载极大可能会失败。怎么办呢？ 配置下 node-sass 的二进制包镜像地址就行了

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

安装好yarn之后，上面就和npm使用一样的，安装依赖包，直接cd到项目目录下用

yarn

就行，安装好了之后，运行项目用

yarn dev
参考文章

1.Vue2.0 新手完全填坑攻略—从环境搭建到发布
2.如何使用yarn&如何用yarn配置node-sass
3.关于npm和yarn安装node-sass失败并且依旧想使用NPM或者yarn的完美解决方案
4.Yarn的安装与使用详细介绍

上一篇 下一篇

猜你喜欢

热点阅读