目录

一 
  
  
  
  
  
  、安装node.js 

二
  
  
  
  
  
  
、搭建vue环境

1
 


 


 


 


 


 

、全局安装@vue/cli模块包

2 
 
 
 
 
 
 、执行命令

3
   
   
   
   
   
   
、检查是否安装成功

三
 

 

 

 

 

 
、创建vue项目

1 

 

 

 

 

 

 、创建项目

 2            、选择模板和包管理器 
  
  
  
  
  
  ，等待项目创建完毕

四

 
 

 
 

 
 

 
 

 
 

 
 
、启动vue项目

1











、执行命令

2                   、浏览项目页面

五
 
 
 
 
 
 
 
 
 
 
 
 
、vue项目目录文件含义和作用

六

















、修改端口号

七             、清理欢迎界面

补充：解决App.vue 代码是黑白色的方法

一
  
 
  
 
  
 
  
 
  
 
  
 
、安装node.js 

1











、下载node.js

 下载地址：下载 | Node.js (nodejs.org)

 2 
  
  
  
  
  
  、安装

 3
  
  
  
  
  
  
、检查是否安装成功

 打开cmd窗口检查是否安装成功：node -v（如果显示出了版本号
  
  
  
  
  
  
，那么说明安装成功了）

二
 


 


 


 


 


 

、搭建vue环境

1 
 
 
 
 
 
 、全局安装@vue/cli模块包

vue官网：https://cn.vuejs.org/

2
   
   
   
   
   
   
、执行命令

切换阿里云镜像

npm config set registry https://registry.npm.taobao.org

安装@vue/cli -g

npm install -g @vue/cli

3
 

 

 

 

 

 
、检查是否安装成功

vue -V

三 

 

 

 

 

 

 、创建vue项目

1            、创建项目

选择一个你想要创建项目的文件夹
 


 


 


 


 


 

，打开控制端执行如下命令

vue create 项目名

注意：项目名不能有大写字母 
 
 
 
 
 
 ，中文和特殊符号

 2

 
 

 
 

 
 

 
 

 
 

 
 
、选择模板和包管理器
   
   
   
   
   
   
，等待项目创建完毕

（蓝色字体表示当前选中的
 

 

 

 

 

 
，按键盘上下键即可选择）

选择模板后 

 

 

 

 

 

 ，等待项目创建完毕即可

四











、启动vue项目

1                   、执行命令

        创建完项目后            ，控制端页面会如上图所示

 
 

 
 

 
 

 
 

 
 

 
 
，此时我们我们只要按上图提示内容











，执行相关命令即可            。

cd 项目名 // 进入到该项目的文件目录下

npm run serve  // 启动内置的webback本地热更新开发服务器

2
 
 
 
 
 
 
 
 
 
 
 
 
、浏览项目页面

执行上面的启动项目命令后                   ，控制端页面会如下所示：

 如果未自动弹出浏览器
 
 
 
 
 
 
 
 
 
 
 
 
，手动复制输入提示的域名+端口 
  
 
  
 
  
 
  
 
  
 
  
 。在浏览器中访问即可

五

















、vue项目目录文件含义和作用

 六             、修改端口号

项目中没有webpack.config.js文件

















，因为vue脚手架项目用的vue.config.js












。

在src并列目录中新建vue.config.js             ，填入如下配置
  
 
  
 
  
 
  
 
  
 
  
 
，最后重启服务器即可修改端口号

module.exports = { devServer: { // 自定义服务配置 port: 3000, // 修改的端口号 open: true }

七
  
 
  
 
  
 
  
 
  
 
  
 
、清理欢迎界面

        对于我们自己开发











，创建新的vue项目目录下有很多文件是不需要的 
  
  
  
  
  
  ，可以直接清理掉

assests和components文件夹下的一切都删除掉（不要默认的欢迎页面） 
  
  
  
  
  
 。

        src/App.vue默认有很多内容
  
  
  
  
  
  
，可以全部删除留下template和script和style的框

补充：解决App.vue 代码是黑白色的方法

下载一个vetur插件就可以了

         安装vetur后代码就可以显示为彩色的了
 


 


 


 


 


 

，同时还可以使用多种快捷键命令 
 
 
 
 
 
 ，比如在.vue文件中
   
   
   
   
   
   
，直接输入命令vue
 

 

 

 

 

 
，就可以直接打出template和script和style的框 
  
  
  
  
  
  。