在之前的vue学习中,都是在html中编写的,但是在一个vue项目中,都是以vue后缀的文件编写组件的。
创建vue项目需要node.js环境,node.js是一款后端语言。
Vue-CLI 项目搭建
第一步:安装node.js,下载地址:下载 | Node.js 中文网 (nodejs.cn),一路下一步,安装完成后会自动添加到环境变量中,这个时候你的cmd就会多了两个命令:
- node:进入node.js环境
- npm:安装模块用
第二步:安装vue-cli,打开cmd窗口输入
npm install -g @vue/cli
如果下载慢,可以用以下命令:
npm install -g @vue/cli --registry=https://registry.npm.taobao.org
或者
# 先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后都用cnpm替代npm使用
cnpm install -g @vue/cli
第三步:创建vue项目,会在当前目录创建。
vue create 项目名
这时候会出现配置选择,通过方向键上下选择,回车确认。
继续方向键选择,按空格选中,选中如图三个选项,回车确认。
选择vue版本,这里我选2.x
然后输入y。
选择第二个。
最后选择是否保存当前的配置选择,输入y保存,输入n取消。保存后以后创建vue项目可以直接用保存好的配置,较方便。
这时候就创建完毕了。
第三步的另外一种方式:使用图形化界面创建vue项目,打开cmd窗口输入:vue ui
运行后会出现一个地址,访问地址,创建流程如下:
第四步:运行vue项目
-
方式一:cmd窗口cd到你创建的项目内,执行 》》》npm run serve
-
方式二:使用pycharm、HbuildX等应用打开vue项目运行。