第一次用Vue-cli搭建vue项目

如题第一次使用vue的脚手架vue-cli搭建vue项目，所以特意写篇文章记录下来以便回味.

一步一步搭建

1.首先在windows系统下打开命令行工具，然后输入npm install -global vue-cli,这段代码的作用就是全局安装vue-cli，执行完这段命令之后可以在我们安装nodejs的文件夹下面看到一个名为vue-cli文件，这就代表安装vue-cli成功。

image.png

npm install -global vue-cli

2然后在F盘目录下面创建一个名为VueStudy的文件，可以把它理解为一个主的文件夹，后面我们创建的vue项目就是它的子文件。通过命令行到达VueStudy文件下面输入vue init webpack my-project(自定义项目名称)，这段代码的意思是：创建一个基于 webpack 模板的新项目。

image.png

接下来就跟着输入项目名称、项目描述、作者、是否安装vue-router、是否使用ESlint检查你的代码等等

image.png

跟着上面全部输完之后，可以发现我们的VueStudy文件下面多出了一个名为showVue的文件，则说明文件生成成功。如图所示：这是项目的大体结构。

image.png

此时我们进入到showVue文件下面，执行如下命令npm install，它的作用是安装依赖。

image.png image.png

可以很明显的看到在执行完npm install命令之后，项目文件中会多出了一个名为node_modules的文件，它就是我们所需要安装的依赖。
接下来我们输入以下命令,这段代码的作用是自动帮我们启动一个端口号为8080的服务。

npm run dev

接下来就是见证奇迹的时候啦，这个时候浏览器会自动帮我们打开一个“http://localhost:8080/#/”窗口，出现如下图片则说明成功啦。

image.png image.png

当然这只是服务器帮我们启的页面，要想自己在本地能够启动还需要输入最后一个命令

npm run build

执行完此命令后，你会惊喜的发现你的showVue文件下面有多出了一个名为dist的文件，这就是我们需要的本地起页面的文件，这个时候执行dist文件下面的index.html就能看到.

image.png

这个时候还会有一个小坑，就是可能你打开dist文件下index.html的时候发现页面没有一片空白同时发现控制台报错，如图：

image.png

不必惊慌，这只是说明你的css与js文件的路径配置有问题，只需要修改为正确的就行啦。

image.png image.png

从图上可以看出已经成功啦

总结

其实用vue-cli搭建vue项目是算不上复杂的，只是第一次倒腾总觉得有点麻烦，重要的只需要记住这5行命令行就行啦:

//全局安装 vue-cli
npm install -g vue-cli
//创建一个基于 webpack 模板的新项目
vue init webpack my-project
//进入项目目录
cd my-project
安装依赖
npm install
//创建8080端口
npm run dev
//生成dist文件
npm run build

Vue的文件结构介绍

image.png

关于npm run dev(启动Node.js本地开发服务器)和npm run build(建立资产进行生产)官方的解释

image.png

参考链接
参考链接

7月1号更新(个人分析通过官网vue-cli脚手架启动的项目)

image.png

components文件夹中Hello.vue就是一个名为Hello的vue的子组件。

export default{
    name:'hello',
    data(){
        return{
            msg:'Vue-Cli-Study'
      }
    }
}

这段代码就相当于定义了一个局部的子组件，组件的名称为hello，返定义了一个data函数并且返回了一个msg属性。然后通过router文件夹中的index.js文件，在实例化路由对象中写上路径就可以被引用了。

image.png