vue-cli 初次demo

1.安装node.js

参照安装node.js

2.安装npm镜像

因为在墙的原因啊,国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

第一步,安装

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

第二步,使用

支持 npm 除了 publish 之外的所有命令, 如:

cnpm install [name]

3.使用vue-cli构建项目

vue-cli是官方的项目构建工具,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目。

第一步,安装

首先要在命令行进入你工作的文件夹

npm install -g vue-cli    //npm安装速度比较慢可以使用cnpm

第二步,选择模板,生成项目

所有的官方项目模板在vuejs-templates。如果有新的模板添加进来,你需要使用下列命令,我选择的模板是webpack,项目名vue-demo,

vue init webpack vue-demo
//vue init <template-name> <project-name>

前面就一直点回车就行了,后面使用ESLint,测试就选择no就行。

eslint算是一个代码语法规范检查的工具,不同意就不会把检查语法规范的功能加进webpack编译的流程里。

项目生成成功,你工作的文件夹中会自动创建一个vue-demo文件夹

第三步,运行项目

cd vue-todos
npm install
npm run dev

这是时候就会自动打开端口 http://localhost:8080/#/你会看到这样的页面。那我们就成功了。

补充注意:

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

自己的项目文件都需要放到 src 文件夹下,项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看。项目上线时,只需要将 dist 文件夹放到服务器就行了。

补充:

用vue-cli构建项目时,需要引入本地的静态js和CSS文件,要怎么打包?将静态的js/css文件放到 static 文件夹中,使用打包命令时他会自动打包到 dist 的 static文件夹中。

<!-- 然后通过引用外部文件的方式就可以加载js文件 -->
<script src="static/js/jquery-1.11.2.min.js"></script>

总结:跟着其他人的教程一步一步做的,至于里边的内容还需要以后慢慢的体会吧。fighting~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容