直接切入正题
一.安装
因为Vue全家桶都需要nodejs环境支持的所以我们需要先从官网上下载最新版本的nodejs
链接如下:https://nodejs.org/en/直接下载电脑对应的版本即可。
安装完之后打开电脑的cmd命令行(mac or linux 用户同理)。
首先需要安装webpack工具(webpack用来打包我们的项目)
运行命令:
npm install webpack -g
等待下载安装完毕即可
如果速度较慢可以安装cnpm的国内淘宝映像,网络速度因人而异。
安装完webpack工具之后可以使用
webpack -v
命令查看电脑是否正确安装完成
接下来使用命令
npm install vue-cil -g
下载 vue脚手架工具
同理安装完毕之后使用
vue -V
命令查看是否正确安装。
至此vue手脚架工具安装完毕
二.小试牛刀
接下来在自己的项目文件夹里右键git bash here工具(当然你也可以使用cmd切换到你的项目文件夹里,如果有耐心的话)
其中vueapp是我起的项目文件名称,可以随意更改
之后再运行
npm install
这句话的意思是安装下我们项目需要的nodejs插件以保证项目能正常运行
下面的几个问题可以先行回车代替后面有时间我们再详细讨论
这里需要注意的是,我们的项目文件夹最好不要用中文,我为了演示方便才没改,这里一定要注意下。
三.查看项目
我们的项目文件已经生成好了,但是我们似乎又无处下手,这么多的文件我们到底在哪里写我们的代码呢?
这里给大家分析一下
build文件夹主要是用来对我们的项目打包来进行的一些设置
config文件夹是用来对我们的测试环境的设置
node_modules则包含了我们项目使用的nodejs插件
src则是我们的代码文件夹 我们的一切代码都要卸载src文件夹里面
剩余的我就不介绍了都是一些项目配置文件以及单元测试文件选项
四.运行本地开发环境
进入我们的vueapp文件夹中然后在git bash键入
npm run dev
稍等片刻后
我们可以打开浏览器看到我们的项目了
五.打包发布
在本地上测试我们的项目肯定还是不够的,我们的web项目肯定是要部署到服务器里面的
首先我们需要打开config/index.js
将里面的assetsPublicPath
设置为assetsPublicPath: '/'
然后在命令行里运行
npm run build
稍等片刻会发现我们的项目文件夹里多了个dist
文件夹
理论上文件是可以直接扔到服务器的项目根目录直接用的,但是发现存在目录路径问题
打开index.html文件
发现格式很乱 使用vscode的格式化快捷键shift+alt+f 格式化代码
然后在三个
<script>
标签的src后加上一个.
上面的
link
后面的href后加上一个.
END
至此,基于vue-cil的项目构建过程就完成了,小伙伴赶紧在自己的src文件夹里大展宏图吧