Vue.js:环境搭建

2017-05-17 阅读:

环境搭建

安装Node.js和vue-cli

下载Node.js Binary版本:https://nodejs.org/en/download/current/,将binary压缩包解压缩到安装目录NODE_INSTALL_PATH中。 设置环境变量NODE_HOME指向到解压缩后的目录,并设置PATH环境变量包含NODE_HOME。

在NODE_INSTALL_PATH中创建一个npm_cache目录,使用下面的命令将npm_cache的路径变更到这个目录中:

npm config set cache NODE_INSTALL_PATH/npm_cache --global 

在国内网络为了使用淘宝的npm镜像安装cnpm:

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

安装vue-cli:

cnpm install -g vue-cli

使用vue-cli创建Vue.js项目

vue-cli是Vue项目的脚手架,使用它可以自动配置开发环境。

查看官方模板列表:

vue list

Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

初始化项目:

vue init webpack hello-prj
  • 按提示初始化项目。

安装依赖:

cd hello-prj
cnpm install

运行:

cnpm run dev

编辑器

  • vscode
  • vscode extentions:
    • vetur

参考

标题:Vue.js:环境搭建
本文链接:https://blog.frognew.com/2017/05/vuejs-get-started.html
转载请注明出处。

目录