《vue初级学习篇（一）》

本文最后更新于：2 小时前

操作vue的npm相关指令

1、卸载

npm uninstall -g @vue/cli

2、安装vue-cli脚手架2.x版本

npm install –global vue-cli

3、查看版本

vue –version

4、创建vue项目 vue init webpack 项目名

vue init webpack demo

一、安装

1、安装node，请到安装教程篇查看。

2、安装vue、vue-cli、vue-router

1
2
3
npm install vue
npm install @vue/cli -g
npm install vue-router@4

或安装用cnpm(npm install cnpm)安装

1
2
3
cnpm install vue
cnpm install @vue/cli -g
cnpm install vue-router@4

3、查看是否安装成功 版本是否安装正确

1
vue --version

二、创建vue项目，开始走起

vue-cli 官方教程：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

1、创建一个新的项目（hello-world）

1
vue create hello-world

选择Default（最新的Vue 3），回车创建

图1-1-1 创建Hello-World项目

图1-1-2 等待构建vue项目

图1-1-3 构建完成

2、启动项目

1
2
cd hello-world
npm run serve

图1-2-1 启动成功

3、这项目只有vue-cli，还需要添加个router

1
2
cnpm install vue-router@4
vue add router

图1-3-1

成功的界面

图1-3-2 添加vue-router成功

三、添加router路由、components组件

添加router的First路由

图3-1-1

放弃了，去了解公司的项目了，拜拜。

《vue》

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！