开启Vue篇章

0、写在前面

试探了几次,官方文档前几页也是看了几遍(哈哈浏览着看),都没有找到入门的感觉,今天去翻了几个视频,感觉有点入门的意思,在此记录。

1、脚手架

按照官方文档,初学者不建议使用脚手架就是那个cli,就一直没有接触,就是老感觉Vue项目里的什么什么都看不懂一脸懵,今天用脚手架创建出一个项目看看里面都有什么吧,嘿。

2、创建第一个Vue项目

1.首先下载安装Node.js

官网下载地址:点击这里直接去到官网下载地址
因为之前没有怎么接触过node.js所以我选择使用.msi安装,省心环境变量啥的都不用自己去配置,对于第一次要使用友好,不至于被环境搞心态。
在这里插入图片描述
点击安装改下地址其余默认配置–我是这样做的,有问题麻烦指正。
傻瓜式下一步即可,就不上图了。
完成后会看到环境变量这里给自动配置好了。
在这里插入图片描述
那去控制台试下,win键+R弹出窗口输入cmd,打开控制台
在这里插入图片描述
在控制台输入node -v看下是否有版本输出
在这里插入图片描述
再试下安装node自带的npm -v
在这里插入图片描述
npm 的官方镜像是非常慢的,改下使用淘宝 NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

此时node.js环境就安装好了,但有个值得注意的点。
执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,不方便管理且占用C盘空间
如果不嫌麻烦可以执行

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

但是要配置响应的环境变量,我这里没有配置。

2.初始化项目

  1. 安装vue-cli
    cnpm install vue-cli -g //全局安装 vue-cli
    我这里使用VScode工具打开了控制台
    在这里插入图片描述
    点击new Terminal,就出现下面界面
    输入命令报错了
    在这里插入图片描述
    原因:在此系统上禁止运行脚本
    解决:退出右键以管理员运行VScode,再次来到控制台输入
    set-ExecutionPolicy RemoteSigned
    完成后重新cnpm install vue-cli -g
    在这里插入图片描述

  2. 查看vue-cli是否成功
    不能检查vue-cli,需要检查vue
    在这里插入图片描述

  3. 切换路径到要创建项目的文件夹
    执行vue init webpack ”项目名称“然后会让一系列选择,按照下面的来就行
    在这里插入图片描述

  4. 下面三步我连在一起了
    进入到项目的文件夹
    cd .\life-web\
    安装cnpm
    cnpm install
    执行dev
    cnpm run dev

在这里插入图片描述
出现上面地址,就去访问下吧
在这里插入图片描述
OK,到这项目搭建成功。

3.项目说明

因为第一次搭建项目,目录结构得理下,里面都什么和什么
先上一张全景图
在这里插入图片描述
寄出大神博客图大神博客地址
在这里插入图片描述
把上述2张图结合看看
在这里插入图片描述

我是一枚Java后端开发程序猿,按java理解src很重要,那我先看src,哈哈
在这里插入图片描述

  • 文件main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  components: {
    
     App },
  template: '<App/>'
})

1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如: 网络请求插件:axios和vue-resource、图片懒加载插件:vue-lazyload
3.存储全局变量。例如(用于的基本信息)

  • 文件App.vue

  • 文件夹router->文件index.js

  • 文件夹components->文件HelloWord.vue

  • 文件夹assets->文件logo.png

躬身自省,淳朴而谦逊否——文文的博客
前辈见之,如有问题,麻烦留言斧正。

猜你喜欢

转载自blog.csdn.net/weixin_42119415/article/details/109543556