谷粒商城29- 前端基础 VUE 介绍_npm安装vue

港控/mmm° 2023-03-03 14:29 2阅读 0赞

### 文章目录 ###

*   *   *  Vue的介绍
         *  npm安装Vue
         *  Vue hello world

### Vue的介绍 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

### npm安装Vue ###

在vscode中, 打开文件夹, 创建学习vue的文件夹  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
使用npm init -y命令, 初始化项目  
`npm init -y`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]  
生成了如下的json配置文件  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5][]  
使用node安装vue, 执行如下的命令, 报错如下  
`npm install vue`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6][]  
根据提示信息, 说了我的项目名称与vue的依赖重名了.

Did you name your project the same
    npm ERR! as the dependency you're installing?

解决办法, 把项目重命名. 文件夹从重命名为vue2 , 同时 ,json的配置文件, 也要重命名为vue2

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7][]  
再次执行npm install vue, 可以看到没有报错  
![20200731194213783.png][]  
并且生成了如下的文件  
![20200731194250223.png][]

### Vue hello world ###

新建立一个index.html  
![20200731195202707.png][]  
demo代码如下, 使用name的动态取值

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <body>
        <div id="txt">
            <h1> {
       {name}}, 唱歌很好听.  </h1>
        </div>
    
        <script> let vm=new Vue({ el: "#txt", data: { name: "周杰伦" } }) </script>
    </body>
    </html>

页面显示如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8][]  
在控制台中, 也可以实时的显示name的值  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9][]  
修改name的值为林俊杰. 可以看到页面上直接也显示成了林俊杰  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/53dfa10ff9814881b71f0cd890eed005.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/56e9516316fb4b83bbf5d36513ad6892.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/036b0e7b3804458bbe468a479fe6568a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/43e0ceb17e044a17802b336fe575de1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20230208/1109bee2a38545e3b861042a7feadbba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5]: /images/20230208/4bfd12dcba17409fa760289afebc0b18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6]: /images/20230208/c25432b98cca4033aafcffa963a36162.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7]: /images/20230208/236cc3a0c534463eb9c2b6390dc98cb0.png
[20200731194213783.png]: /images/20230208/f3c7c22ec0ac41fdbb473dbce1dcfa72.png
[20200731194250223.png]: /images/20230208/634e238cf5784b5c8693cd92bc58507f.png
[20200731195202707.png]: /images/20230208/9a72f31570f7431ba187c077e428378d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8]: /images/20230208/746abe4faf35458889c5a8d625885a52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9]: /images/20230208/9219d8ab194748f3af71db1e2c55a1c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10]: /images/20230208/33343bd8279c44c59cdfd34cb4a041c7.png