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目录中。