npm要点

初始化配置

新增NODE_HOME，值为：E:\work\nodejs
修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;
//node_global：npm全局安装位置
npm config set prefix “E:\work\nodejs\node_global”
//node_cache：npm缓存路径
npm config set cache “E:\work\nodejs\node_cache”

npm仓库源

 

// 单次临时使用，通过指定的镜像源安装模块
npm install --registry=http://registry.npmmirror.com 
// 单次临时使用，通过指定的镜像源安装指定模块
npm  install 模块名 --registry=http://registry.npmmirror.com 
// 单次临时使用，通过指定的镜像源安装 express 模块
npm  install express --registry=http://registry.npmmirror.com 
// 使用 cnpm 命令行工具代替默认的 npm，通过指定的镜像源进行全局安装
npm install -g cnpm --registry=http://registry.npmmirror.com 
// 检查 cnpm 版本
cnpm -v 
// 使用 cnpm 安装 express 模块
cnpm install express 
// 将 npm 源永久替换为指定的 cnpm 镜像源
npm config set registry http://registry.npmmirror.com 
// 恢复 npm 源为默认的官方源
npm config set registry https://registry.npmjs.org 
// 检查当前设置的 npm 源
npm config get registry 

vue-cli要点

//安装Vue脚手架
npm install -g @vue/cli
//在命令行进入自己想要创建项目的目录
cd /Users/work/VueWorkspace
//创建Vue项目
vue create vuedemo1

vite要点

初始化vite
npm init vite
创建vue3项目
创建项目名称=》选择前端框架=》选择ts-js=>
安装依赖
//cd切进项目
npm install cnpm i
启动项目
npm run dev

vite.config.js改配置

export default defineConfig({
  server:{
    //自动浏览
    open:true,
    //启动端口
    port:8088
  },
  plugins: [vue()],
})

router引入

//开发环境
npm add vue-router -D
//生产环境
npm add vue-router -S

src源码当中创建路由基础

//路由导入
import { createRouter,createWebHashHistory } from "vue-router";
//路由配置，入口对象
const routes=[
//首页重定向
    {
        path:'/',
        redirect:'/index'
    },
    {
        path:'/index',
        name:'index',
        component:()=>import('../views/index/index.vue')
    }
]
//写入router对象
const router=createRouter({
    history:createWebHashHistory(),
    routes
})
//导出
export default router

main.js当中引入该路由

//引入
import router from './router/index.js'
//使用
createApp(App).use(router).mount('#app')

vite.config.js配置绝对跟路径@符

//配置@符绝对根目录
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  server:{
    //自动浏览
    open:true,
    //启动端口
    port:8088
  },
  resolve:{

    alias:{
      '@':path.resolve(__dirname,'src'),
    }
  },
  plugins: [vue()],
})