npm 上传自己的第一个scss样式包

1. 注册 npm 账号

步骤:

  1. 打开 npm 官网
  2. 点击 注册
  3. 按照步骤完成

2. 准备上传的 npm 包文件

  1. 首先进入文件夹,执行 npm init,初始化自己的 package.json 文件,下图是我的要上传的 npm 包文件夹

  2. 注意 npm init 中,name 就是自己要上传的包的名称,version 就是版本名称,这里面 name 和 version 是一定要填写的,其他可根据需要填写,name一定要是唯一的不然会失败

  3. npm init 执行完毕并生成 package.json 文件

3. 上传 npm 包

在要上传的 npm 包根目录下执行以下步骤,并确保此时的镜像是指向了 npm 的,如果不是可通过 nrm ls 查看当前有哪些镜像,并 nrm use [镜像名] 切换镜像

  1. 执行 npm adduser,输入自己的账号、密码、邮箱
  2. 执行 npm whoami,查看是否是自己账号,如果显示出自己账号则代表成功
  3. 执行 npm publish,如果一切顺利则会推送成功,如果报错则问题一般是镜像不是 npm,或者包名在 npm 中已存在,或存在相近的
  4. 录自己的 npm 账号,可看到自己的仓库里已经有相应的包,可点击名称进入查看

如果报错 切换为npm源:npm config set registry https://registry.npmjs.org

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我理解您的要求并会进行回答。下面是使用vite创建一个含pinina,sass,修改图片保存路径的vue3.0工程的步骤: 第一步:安装vite和vue-cli 在终端中运行以下命令,安装vite和vue-cli: ``` npm install -g vite @vue/cli ``` 第二步:创建vue3.0项目 在终端中运行以下命令来使用vue-cli创建一个Vue3.0项目: ``` vue create my-vue-app ``` 按照提示进行操作。 第三步:安装依赖 进入项目目录,在终端中运行以下命令来安装所需的依赖: ``` cd my-vue-app npm install --save-dev pinia sass sass-loader @vue/compiler-sfc ``` 以上命令将会安装pinia,sass,sass-loader和@vue/compiler-sfc这几个依赖。 第四步:配置vite.config.js文件 在项目的根目录下创建vite.config.js文件,并添加以下内容: ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { sass: { additionalData: `@import "@/styles/common.scss";` } } }, build: { rollupOptions: { output: { assetFileNames: 'assets/[name][extname]' } } } }) ``` 以上配置将会: - 启用Vue插件,以支持Vue组件。 - 引入common.scss文件。 - 修改图片的保存路径为assets/。 第五步:修改webpack配置 在项目的根目录下找到node_modules/@vue/cli-service/webpack.config.js文件,找到rules数组,并添加下面的代码: ```javascript rules: [ // ...其它规则... { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] } // ...其它规则... ] ``` 以上代码将会给webpack添加处理scss文件的规则。 第六步:修改App.vue文件 在src目录下,找到App.vue文件,并添加下面的代码: ```vue <template> <div class="container"> <img :src="url"> <HelloWorld msg="Hello Vue 3 + Vite + Pinia + Sass!" /> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' import { defineComponent, computed } from 'vue' import logo from '@/assets/logo.png' import { useStore } from 'pinia' export default defineComponent({ name: 'App', components: { HelloWorld }, setup () { const store = useStore() const url = computed(() => { return require(`@/assets/${store.imageUrl}`) }) return { url } } }) </script> <style lang="scss" scoped> .container { max-width: 600px; margin: 0 auto; img { width: 100%; height: auto; display: block; margin-bottom: 20px; } } </style> ``` 以上代码将会: - 引入HelloWorld组件。 - 使用Pinia的useStore函数创建store实例。 - 计算图片的URL。 - 使用Sass编写样式。 第七步:运行开发服务器 在项目的根目录中,运行以下命令启动开发服务器: ``` npm run dev ``` 以上是使用vite创建一个含pinina,sass,修改图片保存路径的vue3.0工程的步骤。如果您有任何问题,请随时与我交流。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值