vue项目-从0开始 vue+element ui

1.配置环境

1. node.js https://nodejs.org/zh-cn/

   

双击安装，在安装界面一直Next，直到Finish完成安装。

打开控制命令行程序（CMD）,检查是否正常

我有一个右击桌面就可以在快捷菜单上有管理者身份的 cmd。
链接：https://pan.baidu.com/s/1TqMeyY77dZYuIsT-9bmiVQ
提取码：1klz

安装完成如图所示，这里我修改了node的安装路径C:\node

修改包路径
默认情况下，我们在执行 npm install -g XXXX 时，下载了一个全局包，这个包的默认存放路径位C:\Users\Administrator\AppData\Roaming\npm\node_modules 下，可以通过CMD指令npm root -g查看
我们可以修改一下默认下载包的地方，首先打开 node 的根目录，新建两个文件夹

node_global // 全局包下载存放
node_cache // node缓存
// 运行下面的代码 修改路径
// 配置全局路径
npm config set prefix "C:\Program Files\nodejs\node_global"
//配置缓存路径
npm config set cache "C:\Program Files\nodejs\node_cache"

虽然 node 自带 npm ,但是不是最新版本的 npm
如果不是最新的版本，可以运行指令

npm install -g npm

就可以安装最新的 npm

使用淘宝NPM 镜像
大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

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

这样就可以使用cnpm 命令来安装模块了：

2.安装vue-cli

npm install vue-cli -g //全局安装 vue-cli

环境已经配置完成

使用 npm 创建 vue 项目

选定路径，新建vue项目，这里我是在桌面上创建项目，右击桌面找到刚刚这个 cmd
下面我一项目名为sell新建vue项目

1.创建一个基于 webpack 模板的新项目: vue init webpack project

注意这里如果不选择no会选择严格模式，在接下来编写项目的时候会出现很多告警错误!!!

现在已经创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：

npm install

npm run dev

执行成功后，会返回一个测试链接：http://localhost:8080，在浏览器中输入此链接，便可以看见以下网页：

利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构，如下：

待更新~~~~~~~~~