Javascript 创建一个Vue.js项目

Javascript 创建一个Vue.js项目

安装npm

前提条件，Mac已经安装了homebrew：

$ brew install npm

安装cnpm

因为国内直接使用NPM镜像源会很慢，所以我们安装cnpm工具使用淘宝NPM镜像源来安装所需依赖：

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

安装vue-cli构建工具

安装命令：

$ cnpm install -g vue-cli

查看安装结果：

$ vue

如果该命令输出Vue的Usage信息，那么说明该工具安装成功了。

创建Vue.js项目

基于webpack模板创建项目（webpack用于浏览器所需静态资源的合并和打包）：

$ vue init webpack my-project

其中my-project为项目名称，命令执行时，会进行一些信息确认和信息完善。大致过程如下：

? Project name my-project
? Project description A Vue.js project
? Author test <test@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".

这样，在当前目录下面就会产生一个名为“my-project”的项目文件夹，目录结果如下：

 README.md
 build
 config
 index.html
 node_modules
 package-lock.json
 package.json
 src
 static
 test

安装依赖

项目创建好后，进入项目目录，运行下面命令安装程序运行所需依赖：

$ cnpm install

运行程序

$ npm run dev

输出内容为：

Your application is running here: http://localhost:8080

发布应用

$ npm run build

发布的内容位于项目目录下的dist目录中。