Vue学习笔记进阶篇之vue-cli安装及介绍
介绍Vue-cli是Vue的脚手架工具 主要作用:目录结构、本地调试、代码部署、热加载、单元测试 地址:https://github.com/vuejs/vue-cli 安装全局安装vue-cli 当然了,要想使用npm工具,就必须安装Node.js,node.js的安装方法这里就不做介绍了。 安装完成后,在终端输入以下命令,可以查看vue的版本: 输入以下命令,可以查看官方提供的模板: 我们可以看到,vue官方提供了6个模板,我们这边主要使用webpack模板。 那么,什么是webpack呢?请看以下介绍: WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。 创建项目创建项目的命令:
下面,我们就用上述命令来创建一个自己的项目,首先中终端通过cd命令,进入你所需要创建项目所在的目录,然后执行以下命令: 在创建的过程中,会有一些项目信息和配置要自己填写,比如项目名称,项目描述,项目介绍等,后面还有几个要自己选择y/n的,我这边暂时都选择了n,因为目前我们还用不到这些东。然后根据提示,依次键入以下命令: 这三个命令是干嘛用的呢?
除了上面的3个命令,还有个比较重要的命令: 这个会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。 项目目录介绍项目目录结构如上图
运行项目上面说到我们运行项目的命令是: 下面我们就执行一下,看下结果: 这个端口号我们也是可以修改的,它是在config/index.js文件下配置的。 只有修改这个地方,然后重新运行就好了。 另外,我们再看看这个 其实这个就是在 如果大家熟悉nodejs的话,肯定一看就明白了,不过这些就算不明白,也不影响我们的vue的学习。 单文件组件src/component目录是用来存放我们自己的组件的,可以看见,这里的组件是以.vue为后缀的单文件组件,一个文件就是一个组件。我把Hello.vue文件简化后,得到以下代码: {{ msg }}
这里面包含了,模板-即标签的内容,js-即
|