我要学习vue！那该怎么开始新建一个vue项目？开启你的vue入门之旅

创建一个vue项目非常简单，只有以下几步！

一、安装node.js

打开官网 https://nodejs.org/en 根据你的系统，按指导进行下载或直接安装！
非常简单，安装好之后打开终端进行验证，以下命令都能正常输出版本号就成功了！

$ node -v
$ npm -v
$ npx -v

二、执行 npm init vue@latest

这一步就已经是正式进入vue项目的创建了，也十分简单，打开终端执行以下命令，回车后按提示输入项目名，再把接下来的选择全部直接回车就好了！

$ npm init vue@latest

三、执行 cd vue-todo-list, npm i, npm run dev

这一步是开始把项目跑起来，可以在浏览器打开进行浏览你的vue项目了！
打开终端，只需要执行3个命令！

$ cd vue-todo-list
$ npm i
$ npm run dev

四、写你的代码

以上命令已经把项目基本目录结构和文件准备好了，现在要做的就是根据你的需求，用组件去搭建实现应用了。

这时候你就需要打开 vue官方文档 https://cn.vuejs.org/guide/essentials/application.html，一边敲代码一边看文档。理解能力强的可以先通读一遍文档再进入编码，这样就大概知道实现什么需要找什么模块。

好，现在就打开你的 vscode 敲代码吧！

五、执行 npm run build

辛辛苦苦码的代码，不能只在自己的电脑上能看到，也要展示出去让其他人看吧！
所以就要打包好项目，就能上传到服务器进行发布了！而这也仅仅只需要一个命令！

$ npm run build

六、服务器安装nginx发布vue

登录阿里云或腾讯云之类的服务器，安装nginx，然后修改nginx配置文件添加 try_files和 rewrite，这2个配置是避免vue项目在有页面的情况下浏览器刷新出现404页面。

# nginx.conf
server {
    listen       80;
    server_name  _;

    location / {
        root   /var/www/build/vue-todo-list;
        #重点配置
        try_files $uri $uri/ @router;
        index  index.html index.htm;
    }
    #重点配置
    location @router {
    	rewrite ^.*$ /index.html last;
    	# 匹配所有	/index.html last;
	}

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }    
}