用Vue-cli从零开始搭建一个Vue项目
2018-07-18 16:16
701 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39514538/article/details/81099388
电脑环境准备
1、下载安装node.js。node中会默认安装npm。命令提示符中 npm -v可查看安装版本。
2、打开命令提示符,安装淘宝镜像cnpm。因为cnpm安装依赖包时会比npm速度快很多。安装命令:
npm install -g cnpm --registry=<a href="https://registry.npm.taobao.org" _src="https://registry.npm.taobao.org">https://registry.npm.taobao.org</a>
安装完毕后可以在命令提示符中输入cnpm -v查看cnpm版本
3、全局安装vue-cli。安装命令:
cnpm install –g vue-cli
项目搭建
1、选择将要搭建项目的目录。比如 d:/mycode
2、命令提示符进入该目录。
3、新建项目。在项目目录下输入命令:
vue init webpack myfirstvue
命令中的nyfirstvue是项目名称,不能含有大写字母。
提示可以都直接回车,这部分是package.json里面的项目说明。
具体说明如下:
Project name (myfirstvue):项目名称。默认为命令后的名称,也可以自己重新起名
Author:项目作者
Runtime + Compiler: recommended for most users :运行加编译,默认推荐,直接回车
Install vue-router? :是否安装vue-router
Use ESLint to lint your code? (Y/n):是否使用ESLint管理代码
Setup unit tests with Karma + Mocha? (Y/n) :是否安装单元测试
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试
4、进入项目目录。
安装依赖模块
cnpm install
5、运行项目
输入命令:
npm run dev
在浏览器地址栏中输入 http://localhost:8080
可看到如下页面
恭喜你,一个vue项目已经搭建成功!
阅读更多相关文章推荐
- 基于vue-cli网上商城项目实战开发——搭建一个完整的SPA项目开发框架(一)
- 【vue】使用Vue-cli搭建项目流程(从零开始)
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
- vue-cli脚手架搭建的项目去除eslint验证的方法
- 使用 vue-cli + element-ui 快速搭建项目
- vue-cli从零开始实现一个仿豆瓣app(五)
- vue-cli项目搭建步骤详解
- 用vue-cli来搭建vue项目和webpack
- Vue2项目架构搭建(二)——vue-cli脚手架创建项目
- 使用 vue-cli 搭建项目
- vue-cli从零开始实现一个仿豆瓣app(三)
- vue cli搭建项目及文件引入
- vue-cli快速搭建vue项目并上传github
- vue-cli脚手架搭建webpack+vue项目
- (vue:案例02) vue-cli 如何搭建项目
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- Vue-cli 脚手架搭建 Vue 项目
- 使用VUE-CLI构建一个项目基本的配置
- Vue项目搭建基础之Vue-cli模版测试
- 从零开始搭建一个主流项目框架(一)—简单的框架