vue与ElementUI项目创建一

1、下载安装node.js  

https://nodejs.org/zh-cn/download/

安装完成后cmd查看

node -v

npm -v

是否已经安装成功

2、创建ElementUI工程

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git 下载官方提供的模板， 

② 使用 cnpm intsall 下载依赖的模块（没有淘宝镜像 cnpm 可以使用npm install） 

③ 使用npm run dev 运行项目

 

 

进入项目根目录，运行npm install ，如果运行速度慢可以使用npm依赖包在国内由阿里云提供的镜像npm install --registry=http://registry.npm.taobao.org

安装结束之后可以可看到目录下多了一个node_modules文件夹，这就是依赖包所在，如果想添加更多依赖包，就继续使用上文指令，如加入vue-router，可以使用如下指令

npm install vue-router --save

3、工程打包运行

安装好依赖后，进入文件根目录，运行  npm run dev 

关于本地服务器的配置信息，在工程根目录的webpack.config.js中，我们可以在该文件中看到如下代码段：

devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

这里的配置信息写的很清楚，本地的服务器端口为8010，如果我们想改变端口号或主机名，只要改变这里对应的字段即可。 
我们输入npm run dev后，会出现一长串信息，最后会出现webpack: Compiled successfully的字样，代表我们的代码编译成功。这时我们打开浏览器，输入localhost:8010，出现如图所示的网页，表示我们的第一个Vuejs2.0 ＋ElementUI工程已经成功运行。
如下图：

 

 

 

 至此一个简单的基于VueJs2.0和ElementUI的前端网站的雏形已经完成了，以后会陆续更新遇到的问题。

参考来源：https://blog.csdn.net/xuehu837769474/article/details/81984937