Vuecli项目搭建和配置

前言:Vue已经成为前端最热门的框架之一,而webpack则是非常常见的前端部署框架,结合这两者优点的,就是Vue-cli脚手架了,利用它可以快速搭建一个vue项目,当然,vue完全是可以单独适用于任何前端框架中的,即使跳过此章,后续的文章阅读也不受影响。

第0步:安装node.js

node.js官网下载地址:

http://nodejs.cn/download/

选择适合系统的版本下载,安装流程简单,在此不做说明,安装完成后,打开控制台(win+R输入cmd回车打开),在控制台中输入指令node -v回车执行,显示版本号则为安装成功

第1步:安装vue-cli插件

打开控制台,执行

npm install -g @vue/cli

安装vue-cli插件最新版本,界面如下:

然后执行

npm install -g @vue/cli-init

安装项目创建辅助工具

第2步:创建项目

打开控制台,进入想要创建项目的文件夹中,本文中的测试项目创建于D:\公众号测试项目,流程如下:

说明:输入盘符D:是进入指定的盘中,cd指令用于进入指定的文件夹,文件夹路径可以直接在文件夹的地址栏复制,执行

vue init webpack testvuecli

创建项目,testvuecli为本文中的项目名称,项目名称建议为纯英文,可以避免很多奇奇怪怪的麻烦,按下回车会出现需要填写的基本内容,按回车确定,出现的内容和说明如下:

1、项目名称,填写testvuecli

2、项目说明,忽略即可

3、项目作者,也可以忽略

4、编译方式,默认选择第一项即可

5、是否启用路由,路由是非常强大的一个工具,强烈建议使用

6、是否启用严格编译,如果选是则会对所有的不严谨的语法和标点符号空格等都进行提示,非常烦人,如果没有特别的严格要求,建议选n(否)

7、是否启用单元测试,建议选否

8、是否启用自动化测试,建议选否

9、最后一项是使用何种辅助工具,选择第一项,安装npm,回车,项目开始创建,安装完成后界面如下:

至此,项目创建完成,打开项目文件夹可以看到变成了以下情况:

第3步:配置项目

1、调整编译路径,打开testvuecli\config\index.js,将build一项中的assetsPublicPath项的值改为'./',否则编译后的项目路径会有问题

index.js文件中的dev中的port则是项目运行时的本地端口号,默认是8080,可以根据自己电脑情况修改为其他端口号

2、项目路径下输入

npm install --save vuex

安装vuex

第4步:启动项目

在控制台进入项目路径下,执行

npm run dev

就可以启动项目,默认在8080端口就可以打开新建的项目,界面如下:

浏览器打开localhost:8080

为了方便运行项目,不用每次都打开控制台敲指令,我们可以新建一个记事本,输入

npm run dev

保存

改名运行.bat

以后直接双击运行就可以运行项目了,也可以发送快捷方式到桌面或者其他地方启动。

Vuecli脚手架的搭建到这里已经基本完成,还有一些配置在这里三言两语说不清楚,后续的例子中将会在实例中补充说明。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180227G1IJ2M00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券