1. vue create vue_demo
2. npm run serve:启动然后打开URL进入默认vue界面,进行测试
上述两步的指令在cmd窗口,cd Desktop中执行上述命令
3. 搭建vue环境后,有必要在package.json的同级目录下创建vue配置文件:
vue.config.js
main.js中添加在import段下:
// 关闭Vue的生产提示
Vue.config.productionTip = false
对于HelloWorld.vue可以删除,同时在App.vue中对于HelloWorld.vue的引入也可以移除
下方是创建vue后App.vue的默认
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
再下方是可删除的,删除了对于HelloWorld.vue的引入和CSS样式,记住,引入其他.vue文件必须如同引入HelloWorld.vue的方法一样
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
进行以上后,vue的基本结构已完成并处于一个干净的状态(即没有任何多余的东西)
为了使用element-ui需要进行下列操作,下面可参考element-ui官网的安装和快速上手来在vue中配置element-ui
4.此时在vscode中打开文件夹vue_demo,vscode终端中安装element-ui服务:npm i element-ui -s
上述指令安装一次即可,下面参考element-ui官网的安装和快速上手来配置。
完整引入:见官网(简单但引入量大),对于这种引入只有一步把element-ui中的安装部分的完整引入的main.js中的内容完全复制粘贴到自己的main.js中即可,仅此一步!之后对于element-ui的配置已完成!
按需引入:见官网(复杂但引入量小),对于这种引入按照官网的操作不能直接全选覆盖自己的,要对自己的进行追加配置。在babel.config.js 中追加修改后的如下:此处,为纯净的(即初始化无任何多于东西),官网的一个地方与vue脚手架有版本适配问题,我的vue脚手架为4.x版,旧版或许依照官网修改babel.config.js可以
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
注:在新版本的vue脚手架中babel.babelrc已改名为babel.config.js
按需引入的其他步骤按照官网慢慢来即可。
之后复制粘贴样式在App.vue或其他.vue文件中再把其他.vue文件引入到App.vue中即可
终端中:npm run serve:进行访问查看效果
如果彻底完成交给后端要进行:npm run build:打包整个项目