使用vue-cli搭建第一个vue项目过程全记录

第一步：检查有没有安装 node 和 npm 检查命令，node -v ; npm -v

第二步：切换淘宝镜像

$ npm get registry #查看原本镜像
$ npm config set registry http://registry.npm.taobao.org/ #修改成淘宝镜像
$ npm config set registry https://registry.npmjs.org/ #镜像还原

第三步：安装vue-cli脚手架，一定要是管理员身份去运行，否则会权限不够，安装报错

权限不够报错关键信息：npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/docsify-cli'

安装命令 npm install -g @vue/cli

注意： 在macOS的终端中安装时需要在安装命令前面输入sudo

第四步：在vscode里面去创建项目

运行以下命令创建项目

vue create hello-world

通过上下键选择预设回车继续运行，如果选择的是vue2或者3，会自动帮你配置对应的项目，babel和eslint都不需要自己设置，一敲回车就会自动运行

但是！初学者还是建议选最后一个选项，Manually select features，自己手动去选择自己需要哪些配置项。

过程如下

1.选择你需要在项目中安装哪些功能，这个根据自己的需要来，上下键移动，空格键选中，勾选之后回车运行

2.选择vue版本

3.Use history mode for router? //在生产中需要适当的服务器设置用于索引回退，输入Yes 或者No

4.Pick a CSS pre-processor //选择css预处理器

Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
LESS //Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
Stylus //Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。

5.Pick a linter / formatter config //选择语法检测工具

ESLint with error prevention only --- 仅错误预防

ESLint + Airbnb config ---Airbnb配置

ESLint + Standard config ---标准配置

ESLint + Prettier

6.Pick additional lint features //选择语法检查方式选lint on save 保存就检查

7.Where do you prefer placing config for Babel, ESLint, etc.? //配置文件放于哪里

In dedicated config files // 独立文件放置
In package.json // 放package.json里

8.Save this as a preset for future projects? //将此保存为将来项目的预设？

如果预设的话，起个名字，下次创建项目可以使用该模板直接创建，不用再次选择，在第一步选择预设的名字即可，因为很多功能不太熟，这里选择No,然后项目开始创建

创建成功

然后直接跟着上面给出的命令去运行就好了，一般运行好了之后不会自动打开浏览器，需要在启动命令后面加上 --open

 "serve": "vue-cli-service serve --open",

进入之后就可以看到vue项目的起始页面

想要在代码中保存之后，页面自动刷新。命令行敲如下代码,下载了这个东西就不用每次都手动刷新了

npm install webpack-dev-server

其他知识点：

router/ index.js

// 导入vue 和 vueRouter的包
import Vue from 'vue'
// 构造函数 VueRouter
import VueRouter from 'vue-router'

// 导入需要的组件（页面）
import loginView from '../views/login.vue'
import homeView from '../views/HomeView.vue'
import aboutView from '../views/AboutView.vue'
import tab1 from '../components/tab1.vue'
import tab2 from '../components/tab2.vue'


// Vue.use() 导入Vue是为了调用.use()函数，把vueRouter安装为vue项目的插件
Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    redirect: '/login' //路由重定向
  },
  {
    path: '/login', //hash地址
    component: loginView //所对应的组件
  },
  {
    path: '/home',
    component: homeView,
    // redirect: '/home/tab1',
    // children 声明子路由规则,子路由规则一般不加斜线
    children:[
      // 如果children数组中，某个路由规则的path值为空字符串，则这条路由规则，叫做默认子路由，和重定向二选一，一样的效果
      { path: '', component: tab1 },
      { path: 'tab2', component: tab2 },
    ]
  },
  {
    path: '/about',
    component: aboutView
  }
]

// 创建路由实例对象
const router = new VueRouter({
  // routes是一个数组：定义hash地址与组件之间的对应关系
  routes
})

// 向外共享路由的实例对象
export default router

main.js

//导入vue这个包，得到vue这个构造函数
import Vue from 'vue' 
//导入App.vue这个根组件，渲染到html页面中
import App from './App.vue'
// 导入路由模块，拿到路由实例模块
import router from './router'


//创建vue的实例对象
new Vue({
  // 在vue项目中要想把路由用起来，需要挂载路由实例对象
  router,
  // 把render函数指定的组建，渲染到html页面指定区域中，用render函数指定的页面替换掉
  render: h => h(App)
}).$mount('#app')
//$mount() 指定要替换的区域，相当于初学时的el挂载器

使用vue-cli搭建第一个vue项目过程全记录

猜你喜欢