使用Vue创建一个新的项目或者打开一个已有的项目

• 打开一个项目

对于一个已经创建好的Vue的项目，比如从GitHub上面fork或download到本地的项目（一个vue的文件夹），想要运行并在浏览器中展示时，简单两步操作即可：（前提是已经有node\npm\vue的环境）， 在命令行输入 node -v，npm -v, vue -V 可分别查看是否安装好以及各自的版本

 

1.

打开cmd命令窗口，如果现有窗口有别的项目在运行，ctrl+c中止，然后转到Vue项目所在的文件夹的路径。

d: 就是将路径转到D盘，否则默认前面都是C盘的路径， cd是进入里面的文件夹，一级一级可以递进到目标文件，这里vue-project 就是我要打开的vue 项目。

cd.. 表示返回上级

 2.

在命令行输入 npm run dev 即可，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式

3、

随即在浏览器中输入网址http://localhost:8080 即可，页面就会同步显示在浏览器中，不用刷新

• 创建一个项目

如果要创建一个新的项目，这个网站上已经讲得很详细了，亲测可行

https://segmentfault.com/a/1190000009871504

这里讲一下简略的操作步骤：

1、环境

   保证已经安装好了node\npm\vue等工具（略，详见网址）

将路径设置为想要建立新项目的文件夹路径

2、关于npm与cnpm

   npm包管理器，是集成在node中的，node环境安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致后面用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。

安装cnpm：

在命令行中输入

npm install -g cnpm --registry=http://registry.npm.taobao.org

然后等待，完成之后，我们就可以用cnpm代替npm来安装依赖包了

3、安装vue-cli脚手架构建工具

在命令行中运行命令

cnpm install -g vue-cli 

然后等待安装完成。(注意，这里使用cnpm来替代npm，不然速度超级慢，会导致卡在那)

通过以上三步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

4、构建结构框架

脚手架装完后，在命令行中运行命令

vue init webpack firstVue

这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstlsqVue是整个项目文件夹的名称，自定义，这个文件夹会自动生成在你指定的目录中.

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好，随后，文件夹中就会出现很多基本的目录结构和代码。其中，我们主要在src目录中做修改。到这里，这个项目现在还只是一个结构框架，整个项目需要的依赖资源（就是前面说到的npm安装依赖包）都还没有安装。

5、安装项目所需的npm依赖包（使用前面的cnpm）

要安装依赖包，首先cd到项目文件夹（firstlsqVue文件夹）

cd firstlsqVue

然后运行命令

cnpm install

安装完成后，原来的目录结构中会出现一个新的文件夹：node_modules,里面就是我们项目需要的依赖包资源，安装完依赖包之后，就可以运行整个项目了

6、运行项目

在项目目录中，运行的命令如上面一种所示，

npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

Cmd会进入项目界面,如上，在此环境中可对代码做修改，浏览器实时显示，要退出该项目，可按ctrl+c

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。

http://localhost:8080

默认会是vue官方界面，可以根据自己的需求修改代码即可