pu369com

安装node(淘宝镜像)+Vue-cli+element-ui逐步搭建开发环境

win10环境

一、 安装node

下载地址：http://nodejs.cn/download/  ，一路NEXT，我安装到了d:\nodejs 目录。

二、让node自带的npm使用淘宝镜像（推荐方式）

npm config set -g registry https://registry.npm.taobao.org

（这里说一下，不推荐安装cnpm，因为后面执行vue init 时可能会卡住，如果你非要用，可以：npm install -g cnpm --registry=https://registry.npm.taobao.org）

三、安装Vue-cli

参考官网https://cli.vuejs.org/   输入 

npm install -g @vue/cli  --force

 （这里说一下，用旧的方式是npm install vue-cli -g，会提示因为coffee-script@1.12.7已经移动到coffeeScript，要先执行npm install --global coffeescript，最后还是有警告）

四、创建和运行vue项目 ，执行   

vue create project
cd myproject
npm run serve

 然后按提示访问：http://localhost:8080/

（这里说一下，用 vue ui  创建不成功，不停地在加载。估计是要从github下载，然而reset了...）

补充：后来vue create 新项目时，命令行工具卡死（npm卡死），参考 https://www.cnblogs.com/dapengFly/p/10620587.html。

原来是要修改c:\Users\您的用户名\.vuerc文件 ， 将.vuerc文件的useTaobaoRegistry改为true即可

五、打包上线

  1. vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build

  2. 执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

六、修改一下页面

将project\src\components\HelloWorld.vue的内容简化并修改如下：

<template>
    <h1>{{ msg }}</h1> 
</template>
<script>
export default { //ES6语法，用于输出到外部，这样就可以在其他文件内用import输入
  name: 'HelloWorld',
  data () {    //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
    return {   //记得return不然接收不到数据
      msg: 'Welcome123321' //上面的 msg 就是这里输出的
    }
  }
}
</script>
<style>
h1 {
  font-weight: normal;
}
a {
  color: #42b983;
}
</style>

 保存即可看到热更新的效果。

七、现在我们来安装一下element-ui

打开命令行停止服务，按照官方方法使用 npm i element-ui -S 命令进行安装

修改项目src目录下的main.js,增加几行内容后，如下：

 

import ElementUI from 'element-ui' //新添加
import 'element-ui/lib/theme-chalk/index.css' //新添加，避免后期打包样式不同，要放在import App from './App';之前
import Vue from 'vue'
import App from './App'
import router from './router'


Vue.use(ElementUI)   //新添加
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

 

添加了这几行，我们就可以使用element-ui了。算是入坑了吧，总感觉还是直接写html、JS和CSS来得直观。
 

参考：https://blog.csdn.net/csdnear/article/details/79426915

https://www.jianshu.com/p/e64004e7ca6a

posted on 2020-04-01 16:31  pu369com  阅读(827)  评论(0)  编辑  收藏  举报

导航