vue的安装、项目创建,新手教程。

安装vue之前要安装以下内容。
1、安装git工具,便于在wind电脑上操作命令行,自行在网上下载安装,可以不安装
2、安装node,检查node安装是否成功,在git工具中输入node -v
3、检查npm是否安装成功,在git工具中输入npm(npm一般随node一起安装在电脑中,node如果成功了,npm基本都会没问题)
4、cnpm安装参考网站:https://developer.aliyun.com/mirror/NPM?from=tnpm
在git工具中输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
检验是否安装成功:cnpm
5、yarn安装参考网站:https://www.jianshu.com/p/4a225dcacd53
git工具输入:npm install -g yarn
检验是否安装成功:yarn -v
6、vue安装:cnpm install vue
7、vue-cli3脚手架工具安装:cnpm install -g @vue/cli或者yarn global add @vue/cli
检查其版本是否正确:vue –version(一定要安装cli3版本,自行搜索安装指定版本命令)
如果安装了别的版本一定要先卸载后安装。vue的安装、项目创建,新手教程。_第1张图片

8、通过图形界面创建vue项目:vue ui
他跟通过cmd创建项目,图形界面不香吗
9、control+c终止vue ui
10、在vscode中运行项目:yarn serve
npm install vue-router --save-dev
yarn install
yarn serve
依然可以运行项目 (有yarn的只输入yarn server就行)
以上如果安装有失误,一定要用命令行删除,不要直接删文件

创建新项目,已经有项目的是这个界面,从来没有过项目的直接是下一个页面。
vue的安装、项目创建,新手教程。_第2张图片
点击创建vue的安装、项目创建,新手教程。_第3张图片
这里记得点yarn包管理器vue的安装、项目创建,新手教程。_第4张图片
然后下一个默认就可以vue的安装、项目创建,新手教程。_第5张图片
等几分钟后创建成功出现这个页面vue的安装、项目创建,新手教程。_第6张图片
然后点击右上角的自定义,添加运行任务组件
vue的安装、项目创建,新手教程。_第7张图片
点配置部件vue的安装、项目创建,新手教程。_第8张图片
就可以用vue ui运行了 点击右边的前往任务页还能看到运行的详情。vue的安装、项目创建,新手教程。_第9张图片
另一种运行方法是10.中的yurn serve 运行
在终端输入yurn serve 即可vue的安装、项目创建,新手教程。_第10张图片
点击下方出现的链接就能看到运行成功的界面vue的安装、项目创建,新手教程。_第11张图片

!!最后提一点,如果想把自己的vue项目发给别人,要把目录中的node_modules删掉再发,对面接收的人接收后打开文件在终端输入cnpm install 就可以安装匹配他电脑的node_modules依赖包。

在安装过程中 如果yarn出现问题就用cnmp 或者npm 其他出现问题同理。

你可能感兴趣的:(vue,vue)