码迷,mamicode.com
首页 > 其他好文 > 详细

使用vue-cli创建vue项目及项目结构说明

时间:2018-12-27 11:21:20      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:完成   pac   构建   cnpm   nbsp   build   格式   构建项目   localhost   

node及vue的安装就不讲了,网上一大堆,自行查阅

1 创建项目目录 

    mkdir vueDemo

2 切换到该目录

    cd vueDemo

3 执行命令创建项目(项目名称:vue-init-webpack)

    vue init webpack vue-init-webpack

   技术分享图片

Project name:——项目名称,直接回车即可

Project description:——项目描述,直接回车即可

Author:——作者,直接回车即可

Vue build:——构建模式,直接回车即可

Install vue-router?:——是否安装引入vue-router,选Y,vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度

Setup unit tests 是测试,可以不用安装,选n

Setup e2e tests with Nightwatch 是测试,可以不用安装,选n

最后一项是选择用什么install依赖组件,因为npm比较慢,我一般选第三项,创建完项目后,使用cnpm安装(cnpm自行在网上查阅安装)

创建项目完成后,会有后继命令的提示,接下来继续操作

4 切换到已创建的项目目录中

  cd vue-init-webpack

5 执行安装依赖组件命令(我这里用的是cnpm)

  cnpm install

  技术分享图片

  技术分享图片

安装完成

6 启动服务(开发环境)

  cnpm rum dev

  技术分享图片

服务启动成功

7 在浏览器查看:http://localhost:8080

  技术分享图片

至此,创建基本vue项目成功,接下来说明该项目各目录及文件的用途

 

使用vue-cli创建vue项目及项目结构说明

标签:完成   pac   构建   cnpm   nbsp   build   格式   构建项目   localhost   

原文地址:https://www.cnblogs.com/liyunfei0103/p/10183620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!