说明:有关vue的所学习我是在macos系统下完成的,因此,相关的配置也是在macos下执行,以后不再赘述。
1.配置VUE环境
安装node.js
vue依托于node.js,因此要使用vue,首先需要在电脑上安装node.js。安装node.js比较简单,直接官网下载相应的版本,傻瓜式安装。
下载地址:Download | Node.js
其中LTS是正是版本,Current是最新测试版本。初学者建议下载正式版本。
安装成功后,打开“终端”,输入node -v,出现版本号则说明安装成功。
node -v
说明安装成功。
安装vue
我是使用npm的方式安装的vue,首先要确保设备上安装了npm,一般安装node后就自带了npm,打开终端输入:
npm -v
出现版本号说明已安装npm。
安装vue时,首先确保设备上还没有安装vue,终端输入:
vue -V
出现版本号,说明已安装,否则是没有安装。注意此处的-V,V是大写。
安装vue可以使用命令:
npm install vue-cli -g
注意此命令是安装的是2.9.6版本的vue,最新版本的已经更新到3.0以上,新添加了图形界面,所以建议直接装最新版,安装最新版命令为:
npm install -g @vue/cli
如因系统权限原因无法安装成功,添加sudo,sudo是获取系统权限。
sudo npm install -g @vue/cli
注意,使用sudo会要求输入设备密码。
如果已经安装了旧版本,则新版本无法安装成功,需要卸载旧版本,卸载命令为:
sudo npm uninstall vue-cli -g
创建和启动项目
cd到本地的文件夹(自己选择),然后输入命令:
vue create test-demo
注意项目名称不能有大写字母和汉字,然后使用上下键选择默认配置即可
创建完成后,cd到项目文件夹(本例中test-demo),输入命令:
npm run dev 或者 npm run serve
出现如下界面表示启动成功。
复制链接到浏览器,即可看到项目界面。
vue常用命令
init 从模板生成新项目
list 列出可用的官方模板
build 创建新项目的原型
create 创建项目(仅适用于3.0以上的版本)