使用npm搭建vue

小咪咪 2023-02-21 11:37 5阅读 0赞

0.1、打开命令提示符窗口，输入npm -v 回车，有版本号显示 说明npm已安装。

0.2、输入node -v 回车，有版本号显示说明nodejs已经安装。之后就可以直接安装vue。

命令输入

1、npm install vue -g 回车 安装vue 。

2、npm install vue-cli -g 回车 安装vue-cli.

3、vue -V 回车 有版本号显示 说明vue安装已经完成。对照图下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70]  
3.1、报错‘vue’不是内部或者外部指令。说明需要配置环境变量。对照图3.1  
![图3.1][3.1]  
3.2、配置环境变量，右击我的电脑

3.3、选择属性打开 对照图3.2  
![图3.2][3.2]  
3.4、选择高级系统设置打开

3.5、选择环境变量设置 对照图3.5  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 1]  
3.6、环境变量设置 可以选择用户也可以是系统，（建议选择用户的）。然后找到安装的vue文件件找到vue.cmd 。把这个文件的路径写进去保存。对照图3.6。打开命令提示符窗口，输入vue -V 回车查看版本号。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 2]  
初始化项目

4、显示版本号之后就说明 vue已经装好了， 可以创建自己的项目了。

打开命令提示符窗口 cd /你的项目目录 例如：cd c:/vue.输入指令 vue initwebpack storevue。

4.1 使用Git 创建项目 选择你项目的文件夹右击，选择Git bush hree,打开Git窗口输入指令vue init webpack storevue.同命令窗指令相同。

5、建项目是根据提示输入你需要的配置，

5.1、你的项目名称 回车

5.2、你的项目描述 回车

5.3、项目中vue的build 回车

5.4、使用vue的路由 回车

5.5、语法检测 y/n 回车

5.6、单元测试y/n 回车

5.7、用手表设置e2e测试 y/n 回车 对照图5  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 3]  
6、建好之后，输入npm run dev，根据后的提示网址在浏览器打开。对照图6  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 4]  
7、如下图，欢迎来到你的vue 好了可以开心的写你的项目了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 5]  
欢迎留言

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020063010415768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70
[3.1]: https://img-blog.csdnimg.cn/2020063010372270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70
[3.2]: https://img-blog.csdnimg.cn/20200630103941425.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200630104139520.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200630104352660.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200630104545392.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200630104715660.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200630105007653.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70