当前位置: 首页 > Web前端 > HTML

学习不一样的Vue实战(一):环境搭建

时间:2023-04-02 12:53:31 HTML

初开始博客:我的博客项目源码:源码项目预览:预览由于个人喜好和工作需要,一直想写这样一个系列的教程,今天我如愿以偿。但这是我第一次写。如有错误和建议,欢迎投诉,谢谢!1.1.1安装Node.js一般来说,可以通过以下三种方式安装Node.js:通过安装包(Windows和Mac用户)从源码编译安装(Linux用户推荐)在Linux下,可以安装Windows和Mac通过yum|apt-get安装:第一步:打开Node官网,下拉,可以看到有两个下载选项:左边那个是LTS版本,是长期支持的稳定版,大多数人都用这个版本。右边是最新版本,支持很多最新的语言特性,对es6的支持也比较多。(大家可以在http://node.green获取Node.js各个版本的ES6支持。)我们在左侧选择版本,点击下载。第二步:下载安装包后打开,点击继续安装。第三步:安装成功后,打开终端,输入以下命令。您可以查看您的节点和npm是否已安装。###Linux用户安装:Linux用户可以从源码编译安装:curl-Ohttps://nodejs.org/dist/v6.10.3/node-v6.10.3.tar.gztar-xzvfnode-v6.10.3.tar.gzcdnode-v6.10.3./configuremakemakeinstall备注:可能会因为缺少依赖导致编译错误。如果这里遇到错误,请自行google。1.1.2淘宝npm镜像因为在墙里,直接使用国内官方的npm镜像很慢,所以这里推荐使用淘宝npm镜像。淘宝npm镜像是一个完整的npmjs.org镜像,可以代替官方版本使用(只读)。同步频率目前为每10分钟一次,以确保尽可能与官方服务同步。第一步:安装$npminstall-gcnpm--registry=https://registry.npm.taobao.org第二步:使用除publish之外的所有支持npm的命令,例如:$cnpminstall[name]1.2.1简介tovue-cliVue-cli是官方的项目构建工具,一个简单的构建工具,通过几个默认的步骤帮助你快速构建Vue.js项目。第一步是安装npminstall-gvue-cli。如果用npm下载速度慢,可以用cnpm。第二步是选择模板。所有官方项目模板都在vuejs-templates中。如果新增模板,需要使用如下命令,vueinit也可以使用vuelist查看官方模板列表。目前可用的模板包括:browserify——全功能的Browserify+vueify,包括热加载、静态检测、单元测试browserify-simple——快速入门的简单Browserify+vueify。webpack——全功能Webpack+vueify,包括热加载、静态检测、单元测试webpack-simple——快速入门的简单Webpack+vueify。simple-单个HTML文件中最简单的Vue设置1.3.1第一个Vue项目第一步是生成项目我们的项目选择webpack,使用如下命令vueinitwebpackvue-todos前面一直按回车即可,后面使用ESLint,测试时选择no即可。第二步,运行项目,输入如下命令运行项目。cdvue-todosnpminstallnpmrundev这个时候会自动打开端口http://localhost:8080/#/你会看到这样一个页面。那么我们就成功了。