node.js + vue-cli + element ui安装教程

雪山小草 發表於 2020-9-2 09:48:00

<h2 id="nodejs--vue-cli--element-ui安装教程">node.js + vue-cli + element ui安装教程</h2>
<h3 id="一安装nodejs">一、安装node.js</h3>
<h4 id="1安装包下载httpnodejscndownload">1、安装包下载：http://nodejs.cn/download/</h4>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291448108.png" alt="image-20200901103902398" loading="lazy"></p>
<h4 id="2安装nodejs">2、安装node.js</h4>
<p>点击.exe文件，无脑next，选择安装目录即可：</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291449362.png" alt="image-20200901104328092" loading="lazy"></p>
<h4 id="3查看版本号及配置淘宝镜像">3、查看版本号及配置淘宝镜像</h4>
<p>以管理员身份 cmd 运行命令 <mark>node -v</mark> 和 <mark>npm -v</mark>:</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291449738.png" alt="image-20200901104700982" loading="lazy"></p>
<p>原npm下载依赖速度过慢，这里需要使用淘宝的镜像：</p>
<pre><code class="language-bash">npm install -g cnpm --registry=https://registry.npm.taobao.org
</code></pre>
<h4 id="4配置-npm-的-全局模块-global的路径和-缓存-cache的路径">4、配置 npm 的全局模块 global的路径和缓存 cache的路径</h4>
<p><strong>4.1在node.安装目录下新建</strong><mark>node_global</mark><strong>和</strong> <mark>node_cache</mark> <strong>两个文件夹</strong></p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291449302.png" alt="image-20200901105613726" loading="lazy"></p>
<p><strong>4.2、cmd执行以下两个命令：</strong></p>
<p><mark>npm config set prefix "D:\tools\node\node_global"</mark></p>
<p><mark>npm config set cache "D:\tools\node\node_cache"</mark></p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291449425.png" alt="image-20200901105651130" loading="lazy"></p>
<h4 id="5配置环境变量">5、配置环境变量</h4>
<p>环境变量>> 系统变量新建 <mark>NODE_PATH</mark>, 变量值为 <mark>node_modules</mark> 路径</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291450378.png" alt="image-20200901110226745" loading="lazy"></p>
<p>环境变量 >> 用户变量编辑 <mark>Path</mark> 变量下的 node 变量值为 <mark>global 路径</mark></p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291450848.png" alt="image-20200901110450613" loading="lazy"></p>
<p>验证环境变量是否配置成功：cmd执行命令 <mark>npm config ls</mark>, global以及 cache路径更新则配置成功：</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291450104.png" alt="image-20200901110744295" loading="lazy"></p>
<p>至此， node.js 安装完毕！</p>
<h3 id="二vue-cli-20版本安装及创建项目">二、vue-cli 2.0版本安装及创建项目</h3>
<h4 id="1cmd-执行安装命令"><strong>1、cmd 执行安装命令：</strong></h4>
<pre><code class="language-bash">npm install vue-cli -g
</code></pre>
<h4 id="2查看版本号"><strong>2、查看版本号：</strong></h4>
<pre><code class="language-bash">vue -V
</code></pre>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291450416.png" alt="image-20200901113746193" loading="lazy"></p>
<p>3.0 及以上版本的安装命令如下，3.0版本与 element ui 存在兼容性问题，故此回退</p>
<pre><code class="language-bash">#安装3.0
npm install @vue/cli -g

#卸载2.0
npm uninstall vue-cli -g

#卸载3.0
npm uninstall @vue/cli -g
</code></pre>
<h4 id="3创建-基于webpack的项目">3、创建基于webpack的项目</h4>
<h5 id="31创建命令">3.1创建命令</h5>
<pre><code class="language-bash">#hellovue2为项目名
vue init webpack hellovue2
</code></pre>
<h5 id="32选择配置">3.2选择配置</h5>
<p>基本上选择默认配置即可完成创建：</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291450929.png" alt="image-20200901115532216" loading="lazy"></p>
<h5 id="33-启动项目">3.3 启动项目</h5>
<pre><code class="language-bash">#进入项目根目录
cd hellovue2
</code></pre>
<p>然后</p>
<pre><code class="language-bash">#启动项目
npm run dev
</code></pre>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291451674.png" alt="image-20200901115854382" loading="lazy"></p>
<p>复制路径，浏览器访问效果如下：</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291451217.png" alt="image-20200901120121343" loading="lazy"></p>
<p>至此，一个vue项目创建完毕！</p>
<h3 id="三引入-element-ui">三、引入 Element ui</h3>
<h4 id="1cmd-项目目录下安装-element-ui">1、cmd 项目目录下安装 Element ui:</h4>
<pre><code class="language-bash">npm i element-ui -S
</code></pre>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291451960.png" alt="image-20200901135632424" loading="lazy"></p>
<h4 id="2mainjs写入以下内容全局引入">2、main.js写入以下内容(全局引入）：</h4>
<pre><code class="language-js">import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
</code></pre>
<h4 id="3引入组件">3、引入组件</h4>
<p>官网：https://element.eleme.cn/#/zh-CN/component/badge，引入组件时，会出现下图错误，需在 <code><template></code>标签下，添加 <code><div></code>标签，将<code><el></code>标签包含进来。</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291451096.png" alt="image-20200901140518955" loading="lazy"></p>
<h4 id="4配置访问路由">4、配置访问路由</h4>
<p>Badge.vue文件如下：</p>
<pre><code class="language-js"><template>
<div>
<el-row class="demo-avatar demo-basic">
   <el-col :span="12">
      <div class="sub-title">circle</div>
      <div class="demo-basic--circle">
      <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
      <div class="block" v-for="size in sizeList" :key="size">
         <el-avatar :size="size" :src="circleUrl"></el-avatar>
      </div>
      </div>
   </el-col>
   <el-col :span="12">
      <div class="sub-title">square</div>
      <div class="demo-basic--circle">
      <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
      <div class="block" v-for="size in sizeList" :key="size">
         <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
      </div>
      </div>
   </el-col>
</el-row>
</div>
</template>

<script>
export default {
name: 'HelloBadge',
data () {
return {
   circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
   squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
   sizeList: ["large", "medium", "small"]
}
}
}
</script>

</code></pre>
<p>在router目录的index.js下进行如下配置：</p>
<pre><code class="language-js">import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloBadge from '../components/Badge.vue'

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [
{
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
},
{
   path: '/HelloBadge',
   name: 'HelloBadge',
   component: HelloBadge
}
]
})
</code></pre>
<h4 id="5效果如下">5、效果如下：</h4>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291451977.png" alt="image-20200901151020948" loading="lazy"></p>
<p>关于绿色图片缘由：https://blog.csdn.net/weixin_43236610/article/details/82866518</p>
<p><img src="https://gitee.com/xiaoshengstudy/typoraPicture/raw/master/202407291451567.png" alt="" loading="lazy"></p>
<p>至此，Element ui组件引入完毕！</p>

</div>
<div id="MySignature" role="contentinfo">
自我控制是最强者的本能-萧伯纳<br><br>
来源：https://www.cnblogs.com/CF1314/p/13600131.html

頁: [1]

琼殿技术论坛's Archiver

node.js + vue-cli + element ui安装教程