一.Vue安装

落日映苍穹つ 2023-05-29 05:08 92阅读 0赞

官网：https://vuejs.org/v2/guide/installation.html  
主要参考：https://blog.csdn.net/sunhuaqiang1/article/details/80160654  
**一 概念**  
**Vue**：渐进式JavaScript框架 特点：数据驱动的视图  
https://www.w3cschool.cn/aekdgs/avjordn1.html  
**ES6**：ECMAScript6 是一种标准（新的语法） JavaScript是EMCAScript的一种  
https://www.runoob.com/w3cnote/es6-tutorial.html  
**webpack**：模块打包工具 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求  
**二 安装 启动**  
1.安装 nodejs npm  
2.安装 vue-cli  
vue-cli：vue脚手架，自动生成vue和webpack的项目模板  
npm install -g @vue/cli vue -V查看版本  
3.挑一个你喜欢的文件夹  
（1）vue init webpack secondvue Project name 不能有大写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70]  
生成了下面这些文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20191104143806535.png]  
特别贴心，命令都告诉你，执行上面两条命令，然后访问http://localhost:8080/ ctrl+c y 结束  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70 2]  
为什么 会有个\# 这是应为路由Router 使用了hash模式 改成history就没有了

export default new Router({ 
      mode: 'history',
    ...
    })

（2）或者用vue create projectname （ vue-cli3） 目录如下 简洁了一些，命令也改变了，看package.json  
![在这里插入图片描述][20191105150833904.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019110415034637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104151211164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk=,size_16,color_FFFFFF,t_70
[20191104143806535.png]: https://img-blog.csdnimg.cn/20191104143806535.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104144254891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk=,size_16,color_FFFFFF,t_70
[20191105150833904.png]: https://img-blog.csdnimg.cn/20191105150833904.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191105151022610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdxaW5neXVlYmFpMTk=,size_16,color_FFFFFF,t_70