随笔- 178 文章- 0 评论- 10 阅读- 72072

初识Vue

# 最终还是要开始学 Vue 了
# 官网：https://cn.vuejs.org/
# Vue的安装、用法、API都在官网里边有详细的说明，所以以后会经常用到它

# Ubuntu下安装 nodejs
# 1. 下载合适你版本的压缩包
https://nodejs.org/en/download
# 2. 将下载后的nodejs压缩包解压后需要配置环境变量(/etc/profile(所有用户)  或   ~/.bashrc(当前用户))
export NODE_HOME=/home/chad/golang/node
export PAT=$NODE_HOME:$NODE_HOME/bin:$PATH
# 3. npm 查询指令(npm 在nodejs环境变量配置好了就可以用了),脚手架依赖着webpack,但webpack的一些版本并不支持less所有版本,所以需要你手动适配
# 4. npm 安装指令-直接安装最新版本(这里以less为例[默认脚手架不支持less,只支持css,所以需要自己手动安装])
npm i less-loader
# 5. npm 安装指定版本包
npm i less-loader@7
# 6. npm 查看包所有版本,然后你就可以根据你的需要去安装了
npm view less-loader versions

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>Hello Vue</title>
 6         <script type="text/javascript" src="../js/vue.js" > </script>
 7         
 8     </head>
 9     <body>
10         <!-- 初识Vue：
11             1.想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象。
12             2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
13             3.root容器里的代码被称为 [Vue 模板]。
14             4.Vue实例和容器是一一对应的（也就是没有一对多或者多对一之说）。
15             5.真实开发中只有一个Vue实例，并且会配合着组件（就是把容器的内容分布给不同的主键去管理，使代码的可读性更强）一起使用。
16             6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
17             7.一旦data中的数据发生改变，name模板中用到该数据的地方也会自动更新
18         -->
19         <!-- 准备好一个容器 -->
20         <div id="root">
21             <h1>Hello,{{name}}!</h1>
22         </div>
23 
24         <script type="text/javascript">
25             Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
26 
27             // 创建Vue实例
28             new Vue({
29                 el:'#root',
30                 data: {
31                     name:'World'
32                 }
33             })
34         </script>
35     </body>
36 </html>

1 # Vue UI组件库
2 #    1.移动端常用UI组件库
3         . Vant https://youzan.github.io/vant
4         . Cube UI https://didi.github.io/cube-ui
5         . Mint UI http://mint-ui.github.io
6 #    2.PC端常用UI组件库
7         . Element UI https://element.eleme.cn
8         . IView UI https://www.iviewui.com