vue安装+测试

1.下载node.js
在浏览器中打开nodejs官网https://nodejs.org/zh-cn/ ，选择须要的版本
2.检查nodejs是否安装成功
打开cmd，输入命令 node -v

1. PS C:\Users\neuer> node -v
2. v20.15.0

复制代码

3.安装cnpm
遇到npm ERR! code CERT_HAS_EXPIRED问题

1. 清除npm缓存
2. npm cache clean --force
3. 取消ssl验证：
4. npm config set strict-ssl false
5. 再不行的话试试更换npm镜像源：
6. npm config set registry http://registry.cnpmjs.org
7. npm config set registry http://registry.npm.taobao.org
9. 最后执行，下载cnpm
10. npm install -g cnpm --registry=https://registry.npm.taobao.org
11. 查看安装版本：
12. cnpm -v

复制代码

4.安装vue-cli (vue脚手架)
通过cnpm全局安装vue脚手架，运行命令

1. cnpm install --global vue-cli
2. 在cmd中输入vue -V （注意：V是大写V）
3. vue -V
4. 结果：
5. PS C:\Users\neuer> vue -V
6. 2.9.6

复制代码

5.创建新项目
在VScode 中使用vue-cli 创建项目时报错 vue : 无法加载文件 C:\Users\…\npm\vue.ps1，因为在此系统上禁止运行脚本。

1. vue init webpack MyPortalProject

复制代码

办理办法：
打开终端管理员，

6.创建新项目

1. PS D:\npy-study\study_memory\vue\learn> vue init webpack MyPortalProject
2. ? Project name myportal? Project description A Vue.js project? Author neuerliu <181870134@smail.nju.edu.cn>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? No? Set up unit tests No? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) npm   vue-cli · Generated "MyPortalProject".# Installing project dependencies ...# ========================npm warn deprecated stable@0.1.8: Modern JS already guarantees Arr

复制代码

7.运行项目
在终端运行

1. cd MyPortalProject
2. 然后运行命令 npm run dev，启动项目看看最终效果吧
4. npm run dev

复制代码

8.安装element-ui

1. cnpm i element-ui -S

复制代码

9.在项目中使用element-ui

• 在main.js中引入element组件
  

1. /*引入如下组件*/
2. import ElementUI from 'element-ui';
3. import 'element-ui/lib/theme-chalk/index.css';
4. Vue.use(ElementUI);

复制代码

• main.js修改后的代码为
  

1. // The Vue build version to load with the `import` command
2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3. import Vue from 'vue'
4. import App from './App'
5. import router from './router'
6. /*引入element组件*/
7. import ElementUI from 'element-ui';
8. import 'element-ui/lib/theme-chalk/index.css';
9. Vue.use(ElementUI);
11. Vue.config.productionTip = false
13. /* eslint-disable no-new */
14. new Vue({
15.   el: '#app',
16.   router,
17.   components: { App },
18.   template: '<App/>'
19. })

复制代码

• 修改组件HelloWorld.vue代码如下
  

1. <template>
2.   <div class="hello">
3.     <h1>{{ msg }}</h1>
4.     <el-row>
5.       <el-button>默认按钮</el-button>
6.       <el-button type="primary">主要按钮</el-button>
7.       <el-button type="success">成功按钮</el-button>
8.       <el-button type="info">信息按钮</el-button>
9.       <el-button type="warning">警告按钮</el-button>
10.       <el-button type="danger">危险按钮</el-button>
11.     </el-row>
12.   </div>
13. </template>
15. <script>
16. export default {
17.   name: "HelloWorld",
18.   data() {
19.     return {
20.       msg: "使用element-ui测试",
21.     };
22.   },
23. };
24. </script>
26. <!-- Add "scoped" attribute to limit CSS to this component only -->
27. <style scoped>
28. h1,
29. h2 {
30.   font-weight: normal;
31. }
32. ul {
33.   list-style-type: none;
34.   padding: 0;
35. }
36. li {
37.   display: inline-block;
38.   margin: 0 10px;
39. }
40. a {
41.   color: #42b983;
42. }
43. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。