vue2.x工程的新建

川长思鸟来 2022-03-25 16:04 286阅读 0赞

# vue2.x工程的新建 #

最近也在看一些vue的项目，有些心得有些体会，把这些心得体会沉淀下来写成一个vue的专栏和大家一起分享一下。  
将会基于vue2.x 和vue-cli3从0开始搭建一个项目。  
这里是这篇专栏的第一篇，简单一点就先创建一个vue的项目吧，后面将会在这个项目中做出很多有意思的事情。

*  本地安装node。这个不用多说，前端的开发基本node安装是标配。建议是8.11+  
    可以通过node -v查看本地node的版本
 *  安装vue,这里使用npm的方式安装vue的脚手架，在终端中输入 ：
    
        npm install -g @vue/cli
    
    *安装完之后如果成功可在终端输入 vue -V（注意V是大写）查看版本，跑这个命令，其实就是在我们的全局环境下注册了 vue这个命令，而且在vue这个命令后面我们还可以传入一些参数*
 *  在终端中cd 到我们需要创建项目的目录下
    
        cd a/b/c/
 *  使用vue cli 提供的创建命令来创建一个vue的项目，例如创建一个项目名称叫vue的项目：
    
        vue create vue
    
    输入这个命令之后你会看到如下图：  
    ![在这里插入图片描述][20190121170001146.png]  
    在这里我们直接选择默认的default即可，然后会运行一会会，在指定目录下创建一个名字叫vue的项目  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_6_color_FFFFFF_t_70][]

按照上面的提示，cd到刚刚创建的项目与下，运行npm run serve就可以将刚刚创建的项目运行起来了。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70][]  
运行之后，本地启动了服务可以通过  
[http://localhost:8081/][http_localhost_8081] 或者是 [http://10.242.44.187:8081/][http_10.242.44.187_8081] 两种方式访问。关于localhost访问和ip访问的区别我也在上一篇bolg中有说明。两者还是有区别的。  
详情请移步: [https://mp.csdn.net/mdeditor/86521807\#][https_mp.csdn.net_mdeditor_86521807]  
粘贴复制上述两个地址中的其中一个到浏览器。就可以看到如下页面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]  
说明我们的工程已近安装成功了。?~  
这是第一篇，就简单写到这儿，写一篇写一下vue的目录结构。

[20190121170001146.png]: /images/20220325/7d27759fe3e245f496cbfd4d0e47ab26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_6_color_FFFFFF_t_70]: /images/20220325/4dbcc7cbc0e84cb8a52fa0bf092cb3c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]: /images/20220325/ddd8070be82540439161c85a76e7e109.png
[http_localhost_8081]: http://localhost:8081/
[http_10.242.44.187_8081]: http://10.242.44.187:8081/
[https_mp.csdn.net_mdeditor_86521807]: https://mp.csdn.net/mdeditor/86521807#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220325/8f8ae4f6c4744feb8500424713232261.png