vue基础-创建一个脚手架项目

128 阅读2分钟

新建文件夹 取名webapp-vue,在文件夹内使用npm init -y 新建一个package.json文件

 

在你当前的文件夹内,按住shift,右击鼠标选择powershell命令窗口

使用npm i -g @vue/cli  全局(整个电脑)安装一个脚手架工具 名字叫做vuecli4

等待安装 安装完之后

输入vue -V检查vuecli脚手架版本 发现报错

输入set-ExecutionPolicy RemoteSigned 再根据提示输入大写的Y回车

图片1.png  

 

 

 

然后在点击任务栏的输入框 右击选择命令窗口,选择以管理员身份运行

 

图片2.png 找到你的项目路径,复制在命令行窗口中输入 cd 加上你的路径

 

图片3.png  

输入vue -V检查一下脚手夹版本发现以下图片 表示ok

 

图片4.png 输入 vue create 项目名称,

 

图片5.png  

可以按下键盘的上下按键进行选择

也可以按ctrl+c 结束命令

 

咱们选择vue2(默认vue2)直接按回车

 

图片6.png  

 

 

 

 

 

 

出现以下内容表示安装成功:

 

图片7.png  

启动项目

输入 cd 项目名称 打开项目所在的文件夹

 

图片8.png 进来之后 输入 npm run serve 启动项目

 

图片9.png 在浏览器中输入以上的地址 就可以操作成功

 

图片10.png 需要你在下面有package.json的目录下打开命令窗口输入npm run serve 启动项目,不能在别的目录下

 

图片11.png  

 

 

图片12.png npm run serve 就是通过上面的命令启动的

 

 通过npm run build把写好的代码文件打包,会生成一个dist文件,dist文件的内容就是html 和 js 还有css,我们之前开发使用前端工程化,最后项目上线还是打包压缩成html js和css,

最后再把dist里面的文件放到服务器的根路径下,启动服务器,就可以在本地跑起来了,如果是线上的服务器,那么就代表前端发布成功了。

 

图片13.png  

 

 

 

 

图片14.png  

 

 

 

图片15.png  

 

 

 

图片10.png