vscode vue环境搭建
2018-08-22 本文已影响6人
1994陈
1,安装node.js:
官网下下载,直接“下一步”完成安装后,在终端输入node -v ,如果出现对应的版本号则表示已经安装过了。
2,安装cnpm:
npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/)
终端中输入: $ npm install -g cnpm –registry=https://registry.npm.taobao.org
3,安装vue-cli脚手架构建工具
npm install -g vue-cli
4.创建文件夹(我的文件夹路径是桌面)
cd desktop
5.运行 vue init webpack firstVue

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。这个时候桌面自动建立该文件夹

该文件夹中会出现以下子文件夹:

这就是整个项目的目录结构,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。

安装项目所需依赖:
MAC右键单机会出现以下菜单栏,最下面有新建位于文件夹位置的终端,点击打开终端;
window直接cd 文件夹位置/文件名

输入:cnpm install (默认第二步的淘宝镜像已经安装好) (超级无敌慢,因为东西特别多)

安装好后我们会在文件夹里发现多处里一个node-modules的文件夹,这个里面就是刚刚安装的依赖模块

使用npm run dev命令后出现以下问题:
